Я пытаюсь установить пользовательские цвета в диаграмме таймсетов 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'
}
}
}
});
----- EDIT Я делаю это, потому что данные (включая идентификатор) генерируются динамически. Спасибо
Вы можете динамически создавать объекты цветов, подобные этому.
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'
}
}
}
});
рабочий код здесь