2013-08-12 2 views
4

Я пытаюсь создать график с HTML5, наткнулся на Chart.js, который казался идеальным, заставил его работать сразу и сфокусировался на основных вариантах и ​​получил точно что я хочу. Затем я перешел на сайт документации: http://www.chartjs.org/docs/ и посмотрел раздел «Параметры графического графика» и попытался добавить некоторые свои собственные для дальнейшего проектирования моего графика.Возникли проблемы с Chart.js «дополнительные опции»

Это 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); 

ответ

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/

+0

Вот обновленная скрипка, до сих пор использует Charts.js 1.x: http://jsfiddle.net/ tG7tc/150 / –