C3.js時間序列圖中的自定義顏色

我試圖在後面的c3.js時間序列圖表中設置自定義顏色。每個陣列的第一個元素是用來識別數據集，因此，如果我有一個數組：C3.js時間序列圖中的自定義顏色

var datatest1 = ['data1', 30, 200, 100, 400, 150, 250];

顏色屬性可以這樣獲得：

colors: {data1:'#0000'}

或：

colors: {'data1':'#0000'}

但是，如果我使用陣列的第一個元素訪問它們：

var data1id = datatest1[0];

然後：

colors: {data1id:'#0000'}

它失敗。不知道我可能做錯了，因爲我得在瀏覽器中沒有反饋...

這裏是一個工作示例：

var axis = ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06']; 
var datatest2 = ['data2', 130, 340, 200, 500, 250, 350]; 
var datatest1 = ['data1', 30, 200, 100, 400, 150, 250]; 

var data1id = datatest1[0]; 
var data2id = datatest2[0]; 

var chart = c3.generate({ 
    data: { 
     x: 'x', 
     columns: [ 
      axis, 
      datatest1, 
      datatest2 
     ], 
     colors: { 
      //data1: '#0000', 
      //data2: '#0000' 
      datatest1: '#0000', 
      datatest2: '#0000' 
     } 
    }, 
    axis: { 
     x: { 
      type: 'timeseries', 
      tick: { 
       format: '%Y-%m-%d' 
      } 
     } 
    } 
});

-----編輯我這樣做，因爲數據（包括標識符）是動態生成的。謝謝

來源

2017-09-14 vabm

您可以像這樣動態創建顏色對象。

var colors = {}; 
colors[datatest1[0]] = '#0000'; 
colors[datatest2[0]] = '#0000';

然後將其設置在圖形這樣

var chart = c3.generate({ 
    data: { 
     x: 'x', 
     columns: [ 
      axis, 
      datatest1, 
      datatest2 
     ], 
     colors: colors //set colors object created above 
    }, 
    axis: { 
     x: { 
      type: 'timeseries', 
      tick: { 
       format: '%Y-%m-%d' 
      } 
     } 
    } 
});

工作代碼here

來源

2017-09-14 05:41:28 Cyril

C3.js時間序列圖中的自定義顏色

回答

相關問題