echart,highcharts,chart.js等chart属性记录

之前有个项目需要使用图表，于是乎讯找了几个比较流行的chart框架，挑选出来几个比较不错的框架进行记录方便以后使用。

首先介绍一下百度的框架echarts，毕竟我还是很爱国的。

echarts为百度编写的一款开源框架，在移动端也兼容，mui框架就使用的这款chart。

echarts的优点是：

1.国人开发，文档全，便于开发和阅读文档。

2.图表丰富，可以适用各种各样的功能。

echarts的缺点：

移动端使用略卡，毕竟是PC端的东西，移植到移动端肯定多多少少有些问题吧，或许跟自己水平也有一定的关系，哎怎么说呢。

echarts不失为一款比较适合我们这种码农使用的框架。

echarts就不贴代码了。毕竟文档很全。

highcharts

优点：

1.美观，功能强大。

2.图表丰富度基本跟echarts没啥区别。

缺点：

1.需要jQuery支持不够灵活。

2.老外开发的中文文档不全。

贴一段柱形图代码来说明几个比较重要的highchart属性

$('#dzprdy').highcharts({//柱状图2
        chart: {
            type: 'column',//图表类型
            spacingBottom: 0,//底边距
            spacingLeft: 0,//左边距
            spacingRight: 0,//右边距
            spacingTop: 0,//上边距
            backgroundColor: '#B1D9FF'//背景色
        },
        title: {
            text: ''//图表主标题
        },
        subtitle: {
            text: ''//图表副标题
        },
            credits: {
                href: null,//右下角链接地址
                text: null//右下角链接文字
            },
            xAxis: {
                categories: [//横轴数据
                    '1',
                    '2',
                    '3',
                    '4',
                    '5',
                    '6',
                    '7'
                ]
            },
            yAxis: {//
                title: {
                    text: null, //侧标题
                },
                labels: {
                    enabled: false//纵轴是否显示
                },
                gridLineColor: '#eaeaea',//纵轴颜色
                min: 0,纵轴最小值

            },
            tooltip: {//鼠标悬浮显示样式
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',//
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                series: {
                    showInLegend: false//是否显示图例
                },
                column: {
                    borderWidth: 0,//柱形图边框宽度
                    pointWidth: 10<span style="font-family: Arial, Helvetica, sans-serif;">//柱形图宽度</span>
                }
            },
            series: [{//鼠标悬浮数据
                name: '计划电量',//数据名称
                data: [1000, 71.5, 800,123,323,123,312]//数据数值

            }]
});

chart.js

优点：

1.轻量级，min版总大小50多k。

2.移动端使用比较流畅，毕竟小。

缺点：

1.功能欠缺比较多。

2.中文文档奇缺。

贴一段代码记录属性,该代码为管状图，表示完成率。

function index_canVas(obj, val) {
	var doughnutData = [{//管状图数据
	<span style="white-space:pre">	</span>value: val,
		color: "#53eae1",
	}, {
		value: 100 - val,
		color: "#eaeaea",
	}];
<span style="white-space:pre">	</span>var ctx = obj.getContext("2d");//绘制图形的Element为传入的obj对象
	window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {
		percentageInnerCutout: inner,//环形图属性
		responsive: true,//
		showTooltips: false,//是否显示悬浮提示
		animation: false//动画效果是否开启
	});
}

最后项目还是选择了chart.js，原因很简单，就是流畅，用户体验比较好，毕竟做软件就是给用户使用的，如果用户体验不好那么你这个应用就是失败的。哪怕功能少，哪怕是英文文档，也要克服种种困难用好它才是一个程序猿应该做的事情。