在前端開發的過程中，經常會使用到圖表相關的東西，很多時候，圖表在展示資料方面有着無與倫比的優勢。下面我們就來看看兩個常用的圖表相關的插件jscharts和ECharts。前者，功能相對單一，但是不依賴任何其他插件；後者功能豐富，有時候需要依賴部分插件，我們可根據需要選擇合适的插件來使用。
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）
使用xml資料繪制：
<?xml version="1.0"?>
<JSChart>
<dataset type="bar">
<data unit="10" value="20"/>
<data unit="15" value="10"/>
<data unit="20" value="30"/>
<data unit="25" value="10"/>
<data unit="30" value="5"/>
</dataset>
</JSChart>
var myChart = new JSChart('chartcontainer', 'bar');
myChart.setDataXML('data.xml');
myChart.draw();
使用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();
（4）去除水印：
如果免費版，将會始終有一個logo水印，可以使用網友提供的免費方案去除水印：“在 jscharts.js檔案中搜尋fs.bg一共出現二處，根據版本不同，bg後面的不一樣我的出現的是fs.bg.2v然後删除這二句代碼，把後面的括号和分号也一起删除啊
然後logo水印就去掉了，标題中還有 JS charts ，這個是如果你在JS中不指定标題，預設列印的，是以需要設定一下标題，myChart.setTitle('title'); 在檔案中的初始化代碼處處加上這句代碼就OK了，title換成你要的标題，注意一定要在myChart.draw();之前設定标題 ”。
通過使用購買版的key 也可以去除水印，使用方式如下：
<script type="text/javascript">
var myData = new Array([10, 20], [15, 10], [20, 30], [25, 10], [30, 5]);
var myChart = new JSChart('chartcontainer', 'line', 'b4949a117e0bff9be30');
myChart.setDataArray(myData);
myChart.draw();
</script>
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>
由于，echarts功能強大，這裡對它就先寫個簡單的例子，其他強大功能用到的時候再深入了解。
轉載于:https://www.cnblogs.com/benxiaohai-microcosm/p/6993712.html