Chart.js与ECharts.js图表使用过程组件对比
投稿：yin
在前端开发的过程中，经常会使用到图表相关的东西，很多时候，图表在展示数据方面有着无与伦比的优势。下面我们就来看看两个常用的图表相关的插件jscharts和ECharts。chartjs 和echarts是D3之外的比较容易使用的数据可视化JS库，两者的配置基本类似。前者，功能相对单一，但是不依赖任何其他插件；后者功能丰富，有时候需要依赖部分插件，我们可根据需要选择合适的插件来使用。
jscharts
什么是JS Charts?
JS Charts是一款基于JavaScript的几乎不需要再重新编码的图表编译器。通过它，使用JavaScript来绘制图表将会是一件很轻松的事情，因为你只需要使用客户端编码就可以实现，不需要额外添加其他插件或者服务端模块，只需要引入文件，准备好数据（xml，json或者数组），就可以生成图表！
JS Charts可以用来绘制不同类型的图表，例如饼状图，柱状图以及简单的折线图等等。
简单使用：
（1）首先，我们引入文件，我们只需要引入一个js文件jscharts.js，它包含了主要的代码和用来适配ie浏览器的canvas函数。
<script type="text/javascript" src="jscharts.js"></script>
（2）容器，第二步是准备一个将来用来容纳图表的容器，它可以是一个简单的div标签，这个标签必须要有一个独一无二的id
<div id="chartcontainer">This is just a replacement in case Javascript is not available or used for SEO purposes</div>
这个容器的内容将会被jschart渲染出来的图表代替。
（3）绘制第一个图表，第三步，我们需要几行JavaScript代码。包括：用于绘制图表的数据，简单的二维数组。每一个子元素数组包含两个元素，这两个元素将是一个折线图的两个顶点，或者其他图表中的某个元素。
<script type="text/javascript">
var myData = new Array([10, 20], [15, 10], [20, 30], [25, 10], [30, 5]);
var myChart = new JSChart('chartcontainer', 'line');
myChart.setDataArray(myData);
myChart.draw();
</script>简单的说明一下，首先定义数据，然后选择我们写好的容器，加上类型参数，创建新的图表对象。第三步，设置图表对象用来渲染的数据，最后，绘制。（使用免费版的时，会自动添加他们产品的logo）
使用json数据绘制：
{
"JSChart": {
"datasets": [
{
"type": "pie",
"data": [
{
"unit": "Unit_1",
"value": "20"
}, {
"unit": "Unit_2",
"value": "10"
}, {
"unit": "Unit_3",
"value": "30"
}, {
"unit": "Unit_4",
"value": "10"
}, {
"unit": "Unit_5",
"value": "5"
}
]
}
]
}
}var myChart = new JSChart('chartcontainer', 'pie');
myChart.setDataJSON('data.json');
myChart.draw();ECharts
ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
下载的时候我们有很多选择，根据自己需求下载合适版本即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script type="text/javascript" src="js/echarts.min.js" ></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>Chart.js与ECharts.js的区别
Chart.js与ECharts.js的区别之“画布”
Chart.js
Chart.js的展示部分需要使用canvas标签，再通过id来绑定script代码部分。
<div style=" width: 100%;display: flex;align-items: center;justify-content: center;"> <div style="width: 70%;"> <canvas id="myChart1"></canvas> </div> </div>
ECharts.js
ECharts.js的展示部分直接使用div标签即可，注意必须规定画布的大小，再通过id来绑定script代码部分。
<div style=" width: 100%;display: flex;align-items: center;justify-content: center;"> <div style="width: 70%;height: 500px;" id="myChart1"></div> </div>
Chart.js与ECharts.js的区别之“语法”
具体语法代码写在script标签里面。画布中的id对应document.getElementById('myChart1');里的id。
Chart.js线形图
Chart.js声明方式为：var chart = new Chart(ctx, option)
<script type="text/javascript">
var ctx = document.getElementById('myChart1').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: ["201712", "201801", "201802", "201803", "201804", "201805", "201806",
"201807", "201808", "201809", "201810", "201811", "201812", "201901", "201902",
"201903", "201904", "201905", "201906", "201907", "201908", "201909", "201910",
"201911"
],
datasets: [{
label: "综合评级",
fill: false, //是否填充，不填充就显示线。
backgroundColor: "rgba(242,190,64,1)", //线的颜色
borderColor: "rgba(242,190,64,1)",
pointBackgroundColor: "rgba(255,255,255,1)", //数据点的颜色
pointStrokeColor: "rgba(242,190,64,1)",
data: [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3],
},
{
label: "食品安全评级",
fill: false,
backgroundColor: "rgba(159,190,223,1)",
borderColor: "rgba(159,190,223,1)",
pointBackgroundColor: "rgba(255,255,255,1)",
pointStrokeColor: "rgba(159,190,223,1)",
data: [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
}
]
},
// Configuration options go here
options: {
customXLabelRota: 90,//x轴的标注倾斜展示
customXLabelRotaMinNumber: 90,//x轴的标注倾斜展示
scaleShowGridLines: false,
pointDot: true,
legend: {
labels: {
usePointStyle: true,//图例的样式使用点的样式
}
},
scales: {
yAxes: [{ //y轴
ticks: {
beginAtZero: true, //y轴从0开始
min: 0, //y轴最小值
max: 15, //y轴最大值
stepSize: 3 //y轴尺度跨度
}
}],
xAxes: [{
ticks: {}
}]
},
}
});
</script>
ECharts.js线形图
ECharts.js声明方式为：var myChart = echarts.init(document.getElementById('myChart1'));
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('myChart1'));
option = {
legend: {
data: ['综合评级', '食品安全评级']
},
tooltip: {
trigger: 'axis', //鼠标覆盖出现辅助标线
},
grid: { //防止标签溢出
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ["201712", "201801", "201802", "201803", "201804", "201805", "201806",
"201807", "201808", "201809", "201810", "201811", "201812", "201901", "201902",
"201903", "201904", "201905", "201906", "201907", "201908", "201909", "201910",
"201911"
],
axisLabel: { //轴值倾斜展示
interval: 0,
rotate: 40
},
},
yAxis: {
type: 'value',
max: 15,
},
series: [{
name: '综合评级',
type: 'line',
// stack: '总量',
data: [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3],
// 显示数值
itemStyle: {
normal: {
color: "rgba(242,190,64,1)", //设置线条颜色
label: {
show: true
}
}
},
},
{
name: '食品安全评级',
type: 'line',
// stack: '总量',
data: [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
// 显示数值
itemStyle: {
normal: {
color: "rgba(159,190,223,1)", //设置线条颜色
label: {
show: true
}
}
},
}
]
};
myChart.setOption(option);//不写就画不出来哦
</script>
总结
chartjs只能基于canvas，虽然只有英文文档，但定制化程度更高，社区成熟，功能就更加稳定，
ECharts.js可以基于svg或者canvas去渲染，有融合主流前端框架的社区库，另外ECharts.js还支持3d效果的图表，相当炫酷。国内开发者大多数使用这个，有中文文档。
到此这篇关于Chart.js与ECharts.js图表使用过程组件对比的文章就介绍到这了,更多相关Chart.js与ECharts.js图表对比内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！