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