利用chartjs生成圖表

說明

下面是如何利用chartjs生成圖表,引用好Chart.js之後我們就可以直接使用了。很方便就可以生成了。還有很多其他格式,以後會再詳細介紹如何使用。

html

<canvas id="canvas" height="400" width="500"></canvas>

JS

var json = [
{"company_name":"project A",
"present_worth":"81531.946062978"},
{"company_name":"projectB","present_worth":"67313.916593765"},{"company_name":"project c","present_worth":"92440.723376746"}];
var chartjsData = [];
for (var i = 0; i < json.length; i  ) {
chartjsData.push(json[i].present_worth);  
}
var chartjslabel = [];
for (var i = 0; i < json.length; i  ) {
chartjslabel.push(json[i].company_name);  
}
var barChartData = {
labels :chartjslabel,
datasets : [
{
fillColor : "rgba(220,280,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
data : chartjsData
}
]
};
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(barChartData);

效果如下圖

這裡寫圖片描述