4

我正在尝试使用 HTML5 制作图表，偶然发现 Chart.js 似乎很完美，让它立即工作并摆弄核心选项并得到我想要的。然后我去了文档站点： http: //www.chartjs.org/docs/并查看了“线图选项”部分，并尝试添加一些我自己的以进一步设计我的图表。

这是我的图表的 JsFiddle ( http://jsfiddle.net/Skylights/j8Ah3/ ) ...以及“额外”选项完全没有任何作用的评论...我不知道我做错了什么..我应该在哪里放置这些额外的选项以使它们正常工作。

我想我错过了添加或允许选项的一些东西。

//Visitors Graph

var lineChartData = {
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
    datasets: [{
        fillColor: "rgba(0,0,0,0)",
        strokeColor: "rgba(197,115,30,1)",
        pointColor: "#c5731e",
        pointStrokeColor: "#c5731e",
        data: [65, 59, 90, 81, 56, 55, 40],

        // A few random options that don't work...
        scaleFontColor : "#f00",
        datasetStrokeWidth : 5,

    }, {
        fillColor: "rgba(0,0,0,0)",
        strokeColor: "rgba(197,171,30,1)",
        pointColor: "#c5ab1e",
        pointStrokeColor: "#c5ab1e",
        data: [28, 48, 40, 19, 96, 27, 100]
    }]
}

// Draw Visitors Graph Line
var myLine = new Chart(document.getElementById("visitors-graph").getContext("2d")).Line(lineChartData);
4

1 回答 1

15

您将这些添加到错误的子对象中；这些选项应该作为第二个参数传递，如下所示：

var lineChartData = {
    ...
};

var options = {
    scaleFontColor: "#f00",
    datasetStrokeWidth: 5
};

var myElement = document.getElementById("visitors-graph").getContext("2d");

var myLine = new Chart(myElement).Line(lineChartData, options);

演示：http: //jsfiddle.net/tG7tc/

于 2013-08-12T23:12:26.757 回答