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

Question

我正在尝试在 this example 之后的 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

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

Custom colors in C3.js timeseries chart

javascript

d3.js

c3.js