利用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);

效果如下圖