2016-03-21 41 views
1

有沒有辦法使用chart.load更新基於顏色陣列的顏色()?c3js - 更新圖表顏色與彩色陣列使用chart.load()

問題是,如果我刪除任何以前插入的列,然後插入另一個並重新加載圖表,則新顏色將成爲數組中的下一個顏色,而不是跟隨實際顏色數組序列。

例。的顏色陣列是[紅色,綠色,藍色,白色],然後我喂圖與3列的數據和它們與紅,綠和藍線正確地繪製,然後我刪除一列並重新加載圖表(所示的線的顏色是紅色和綠色),然後我用新數據插入一個新列,而不是用藍色(這是顏色數組中的第三個)繪製這個新行,它最終用數組中的下一個顏色繪製,白色。

Here's使用的代碼I'm:

I'm第一生成圖表與顏色的數組:使用Ajax更新圖表時

var colors= ['#1f77b4', '#aec7e8', '#ff7f0e', '#ffbb78', '#2ca02c', '#98df8a', '#d62728', '#ff9896', '#9467bd', '#c5b0d5', '#8c564b', '#c49c94', '#e377c2', '#f7b6d2', '#7f7f7f', '#c7c7c7', '#bcbd22', '#dbdb8d', '#17becf', '#9edae5'] 

var chart = c3.generate({ 
      .... 
      color: { 
       pattern: colors 
      } 
      .... 
}); 

然後:(插入或取出列)

chart.load({ 
      columns: arr2, 
      unload: true, 
      done: function() { 

      }, 

     }); 

arr2是一個將數據輸入到圖表的多維數組。

我曾嘗試插入:{模式:顏色}在這裏,但它doesn't工作。

回答

1

所以你試圖把顏色分配給列的索引(一個更好的詞想要的),但它似乎C3永遠不會降低它的使用模式陣列上,當你刪除數據的索引,不僅增加了它作爲新數據被加載,並且模式在被設置後不能被改變?

我想對於大多數情況下(即,除了刪除最後一列)這是有意義的。假設您卸載第一個數據列,您是否希望第二個和第三個數據列突然切換爲模式中的第一個和第二個顏色,或保留其現有顏色?我會想要後者。但在這種情況下,如果模式索引在卸載時遞減,則新加載的列將以第三種顏色顯示 - 已分配 - 因此,屏幕上將顯示具有相同顏色的兩行/一組條。它越來越看起來像是需要的是一張地圖,它導致...

如果你想取代數據並保持相同的顏色,它的方式是通過data.colors(複數)(http://c3js.org/samples/api_data_color.html)每種顏色轉換成特定列的ID。這些也可以在初始化後更改,但由於它們是按列ID分配的,所以在這種情況下通常不需要這樣做。

不管怎麼說,簡短的回答是有一些c3.js例子捅了一下,不,我看不到通過color.pattern做你想做的事。這並不意味着別人不知道。垃圾回答誒;-)

+0

嗯,我做了,但沒有任何東西似乎符合我的需求,特別是因爲我的專欄ID /名稱是dinamically生成的。無論如何感謝您的答案! – Art

+0

編輯。也許如果有一種方法可以循環瀏覽chart.data.colors()中的列而不知道列的ID – Art

+1

你的意思是像這樣的小提琴嗎? - > https://jsfiddle.net/qer2r5pv/1。它根據列順序和現有的模式數組構建數據顏色。我只是覺得它會很脆弱(例如嘗試刪除data1) – mgraham