2016-07-06 79 views
0

這是我的jsfiddle,解釋我面臨的問題。我想基本上通過選擇對象(禁用填充和貝塞爾曲線),我就像在舊版本做了...將全局選項傳遞給2.1.6/Chart.js中的折線圖

https://jsfiddle.net/xjdvngwe/

基本上我想要實現傳遞一個選項,以圖表 功能在圖表創建

var options = { fill:false,tension:0, lineTension :0.1}; 
var chart_testChart = new Chart.Line(ctx, 
    { 
     data: data, 
     options: options 
    }); 

而在2.1.6的最新版本的時候,我不能得到這個工作

如果我通過他們這個樣子,他們的工作很好,但我正在尋找一種方式來將它們作爲選擇對象

var data = { 
labels: ["January", "February", "March", "April", "May", "June", "July"], 
datasets: [ 
    { 
     label: "My First dataset", 
     fill: false, 
     lineTension: 0.1, 

回答

0

這是因爲你誤解了這個圖表是如何構建的:

你假設filltension屬性都是直接在選項的根源,但它們實際上是在options.element.line

欲瞭解更多信息,請有關element configuration的chart.js之DOC(滾動,直到行配置你的情況)。


但要小心!不要混淆:

  • 編輯一個元素(如你管理你的問題的第二部分做的)編輯傳遞給圖表數據的數據集:

    datasets: [ 
    { 
        label: "My First dataset", 
        fill: false, 
        lineTension: 0.1, 
        // ... 
    }] 
    
  • 編輯的所有相同類型的元素(這裏,折線圖)通過編輯圖表選擇:

    var options = { elements: { line: { /*options */ } } }; 
    

    documentation說明我上面給出:

    選項可以被配置爲四種不同類型的元件;弧線,點和矩形。 設置後,這些選項將應用於該類型的所有對象,除非被數據集附加的配置明確覆蓋。

所以一定要確保你真正想要直接在選項編輯這些屬性之前編輯所有的折線圖。現在


如果你仍然想在選項編輯,你將不得不建立自己的 options VAR是這樣的:

var options = { elements: { line: { fill: false, tension: 0.1 } } }; 
var chart_testChart = new Chart.Line(ctx, 
{ 
    data: data, 
    options: options 
}); 

這裏是一個working fiddle,如果你想看到的結果。

+1

感謝您的詳細解釋!我無法通過查看現有文檔輕易推斷出這一點 –

+0

@PuneetGupta文檔中有很多信息,但有時候,很難找到您要查找的內容..很高興幫助:) – tektiv