Question

我正在尝试使用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);

Answer 1

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

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/

遇到Chart.js“额外选项”的问题

1 个答案: