Chart JS不使用动态数据

时间:2014-06-10 06:17:37

标签: javascript jquery chart.js

我正在使用www.chartjs.org,该代码适用于"数据"的硬编码数据。属性,它完全显示labelArr但是有mapDataArr和goalArr作为变量传递的问题。

var chartDataArr = [110.0,70.0,30.0,130.0,100.0];
var goalArr = [67.9,67.9,67.9,67.9,67.9];
var labelArr = ["a", "b", "c", "d", "e"];

// this requires HTML5 canvas, <canvas id="graphContainerOne" width="400" height="200"></canvas>
var ctx = $("#graphContainer").get(0).getContext("2d");
//This will get the first returned node in the jQuery collection.

var mydata = {
    labels: labelArr,
    datasets: [{
        fillColor: "rgba(0,176,80,0.5)",
        strokeColor: "rgba(0,176,80,1)",
        pointColor: "rgba(0,176,80,1)",
        pointStrokeColor: "#fff",
        data: chartDataArr
    }, {
        fillColor: "rgba(0,112,192,0.5)",
        strokeColor: "rgba(0,112,192,1)",
        pointColor: "rgba(0,112,192,1)",
        pointStrokeColor: "#fff",
        data: goalArr
    }]
};

var options = {
    bezierCurve: false
};

var myNewChart = new Chart(ctx).Line(mydata, options);

1 个答案:

答案 0 :(得分:0)

以下对我来说很好。您使用的是最新版本的chart.js吗?

var array = [298,287,284,282,280];
var labelArray = ["April","May","June","July","August"];

var data = {
labels : labelArray,
pointDotStrokeWidth : 5,
datasets : [
    {
        label: "My First dataset",
        fillColor : "rgba(151,187,205,0.5)",
        strokeColor : "rgba(151,187,205,1)",
        pointColor : "rgba(151,187,205,1)",
        pointStrokeColor : "#fff",
        data : array


    },
    {
        label: "My First dataset",
        fillColor: "rgba(220,220,220,0.0)",
        strokeColor: "rgba(20, 138, 44, 1)",
        highlightFill: "rgba(220,220,220,0.75)",
        highlightStroke: "rgba(220,220,220,1)",
        pointColor : "rgba(151,187,205,0)",
        pointStrokeColor : "rgba(151,187,205,0)",
        data: [287, 287, 287, 287, 287]
    }
]
}

var ctx = $("#weekChart").get(0).getContext("2d");
new Chart(ctx).Line(data);