Chart.js與ECharts.js圖表使用過程組件對(duì)比
在前端開發(fā)的過程中，經(jīng)常會(huì)使用到圖表相關(guān)的東西，很多時(shí)候，圖表在展示數(shù)據(jù)方面有著無與倫比的優(yōu)勢。下面我們就來看看兩個(gè)常用的圖表相關(guān)的插件jscharts和ECharts。chartjs 和echarts是D3之外的比較容易使用的數(shù)據(jù)可視化JS庫，兩者的配置基本類似。前者，功能相對(duì)單一，但是不依賴任何其他插件；后者功能豐富，有時(shí)候需要依賴部分插件，我們可根據(jù)需要選擇合適的插件來使用。
jscharts
什么是JS Charts?
JS Charts是一款基于JavaScript的幾乎不需要再重新編碼的圖表編譯器。通過它，使用JavaScript來繪制圖表將會(huì)是一件很輕松的事情，因?yàn)槟阒恍枰褂每蛻舳司幋a就可以實(shí)現(xiàn)，不需要額外添加其他插件或者服務(wù)端模塊，只需要引入文件，準(zhǔn)備好數(shù)據(jù)（xml，json或者數(shù)組），就可以生成圖表！
JS Charts可以用來繪制不同類型的圖表，例如餅狀圖，柱狀圖以及簡單的折線圖等等。
簡單使用：
（1）首先，我們引入文件，我們只需要引入一個(gè)js文件jscharts.js，它包含了主要的代碼和用來適配ie瀏覽器的canvas函數(shù)。
<script type="text/javascript" src="jscharts.js"></script>
（2）容器，第二步是準(zhǔn)備一個(gè)將來用來容納圖表的容器，它可以是一個(gè)簡單的div標(biāo)簽，這個(gè)標(biāo)簽必須要有一個(gè)獨(dú)一無二的id
<div id="chartcontainer">This is just a replacement in case Javascript is not available or used for SEO purposes</div>
這個(gè)容器的內(nèi)容將會(huì)被jschart渲染出來的圖表代替。
（3）繪制第一個(gè)圖表，第三步，我們需要幾行JavaScript代碼。包括：用于繪制圖表的數(shù)據(jù)，簡單的二維數(shù)組。每一個(gè)子元素?cái)?shù)組包含兩個(gè)元素，這兩個(gè)元素將是一個(gè)折線圖的兩個(gè)頂點(diǎn)，或者其他圖表中的某個(gè)元素。
<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>簡單的說明一下，首先定義數(shù)據(jù)，然后選擇我們寫好的容器，加上類型參數(shù)，創(chuàng)建新的圖表對(duì)象。第三步，設(shè)置圖表對(duì)象用來渲染的數(shù)據(jù)，最后，繪制。（使用免費(fèi)版的時(shí)，會(huì)自動(dòng)添加他們產(chǎn)品的logo）
使用json數(shù)據(jù)繪制：
{
"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是一個(gè)使用 JavaScript 實(shí)現(xiàn)的開源可視化庫，可以流暢的運(yùn)行在 PC 和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等），底層依賴輕量級(jí)的矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。
下載的時(shí)候我們有很多選擇，根據(jù)自己需求下載合適版本即可。
<!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準(zhǔn)備一個(gè)具備大?。▽捀撸┑腄om -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>Chart.js與ECharts.js的區(qū)別
Chart.js與ECharts.js的區(qū)別之“畫布”
Chart.js
Chart.js的展示部分需要使用canvas標(biāo)簽，再通過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標(biāo)簽即可，注意必須規(guī)定畫布的大小，再通過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的區(qū)別之“語法”
具體語法代碼寫在script標(biāo)簽里面。畫布中的id對(duì)應(yīng)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: "綜合評(píng)級(jí)",
fill: false, //是否填充，不填充就顯示線。
backgroundColor: "rgba(242,190,64,1)", //線的顏色
borderColor: "rgba(242,190,64,1)",
pointBackgroundColor: "rgba(255,255,255,1)", //數(shù)據(jù)點(diǎn)的顏色
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: "食品安全評(píng)級(jí)",
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軸的標(biāo)注傾斜展示
customXLabelRotaMinNumber: 90,//x軸的標(biāo)注傾斜展示
scaleShowGridLines: false,
pointDot: true,
legend: {
labels: {
usePointStyle: true,//圖例的樣式使用點(diǎn)的樣式
}
},
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: ['綜合評(píng)級(jí)', '食品安全評(píng)級(jí)']
},
tooltip: {
trigger: 'axis', //鼠標(biāo)覆蓋出現(xiàn)輔助標(biāo)線
},
grid: { //防止標(biāo)簽溢出
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: '綜合評(píng)級(jí)',
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],
// 顯示數(shù)值
itemStyle: {
normal: {
color: "rgba(242,190,64,1)", //設(shè)置線條顏色
label: {
show: true
}
}
},
},
{
name: '食品安全評(píng)級(jí)',
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],
// 顯示數(shù)值
itemStyle: {
normal: {
color: "rgba(159,190,223,1)", //設(shè)置線條顏色
label: {
show: true
}
}
},
}
]
};
myChart.setOption(option);//不寫就畫不出來哦
</script>
總結(jié)
chartjs只能基于canvas，雖然只有英文文檔，但定制化程度更高，社區(qū)成熟，功能就更加穩(wěn)定，
ECharts.js可以基于svg或者canvas去渲染，有融合主流前端框架的社區(qū)庫，另外ECharts.js還支持3d效果的圖表，相當(dāng)炫酷。國內(nèi)開發(fā)者大多數(shù)使用這個(gè)，有中文文檔。
到此這篇關(guān)于Chart.js與ECharts.js圖表使用過程組件對(duì)比的文章就介紹到這了,更多相關(guān)Chart.js與ECharts.js圖表對(duì)比內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了JavaScript中三種異步上傳文件方式的相關(guān)資料,需要的朋友可以參考下2016-03-03
本篇文章主要是對(duì)js判斷頁面中是否有指定控件的簡單實(shí)例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-03-03
boostrap模態(tài)框二次彈出清空原有內(nèi)容的方法
今天小編就為大家分享一篇boostrap模態(tài)框二次彈出清空原有內(nèi)容的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Echarts橫向堆疊柱狀圖和markLine實(shí)例詳解
一些柱形圖在數(shù)據(jù)量比較多的時(shí)候,橫向排列受到擠壓,導(dǎo)致柱形圖,變的非常細(xì),影響整體的效果,所以應(yīng)該將柱形圖堆疊起來,這樣就會(huì)好很多,下面這篇文章主要給大家介紹了關(guān)于Echarts橫向堆疊柱狀圖和markLine的相關(guān)資料,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了微信小程序按順序同步執(zhí)行的兩種方式,本文通過實(shí)例代碼給大家講解，代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-12
原生javascript中this幾種常見用法總結(jié)
這篇文章主要介紹了原生javascript中this幾種常見用法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript中this的功能、常見用法及操作注意事項(xiàng),需要的朋友可以參考下2020-02-02
javascript設(shè)置文本框光標(biāo)的方法實(shí)例小結(jié)
這篇文章主要介紹了javascript設(shè)置文本框光標(biāo)的方法,結(jié)合實(shí)例形式總結(jié)分析了javascript針對(duì)文本框光標(biāo)的位置、設(shè)置及文本操作的相關(guān)技巧,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了Javascript中的對(duì)象和繼承，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
js關(guān)于getImageData跨域問題的解決方法
這篇文章主要為大家詳細(xì)介紹了js關(guān)于getImageData跨域問題的解決方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
uni-app??? 是一個(gè)使用 ???Vue.js?? 開發(fā)所有前端應(yīng)用的框架，開發(fā)者編寫一套代碼，可發(fā)布到iOS、Android、H5、以及各種小程序（微信/支付寶/百度/頭條/QQ/釘釘）等多個(gè)平臺(tái)，這篇文章主要介紹了uni-app的基本使用,需要的朋友可以參考下2022-11-11