C3.js时间序列图中的自定义颜色

Question

我试图在后面的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' 
      } 
     } 
    } 
}); 

-----编辑 我这样做，因为数据（包括标识符）是动态生成的。谢谢

Answer 1

您可以像这样动态创建颜色对象。

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