Пользовательские цвета на графике временных рядов C3.js

1

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

Теги:
d3.js
c3.js

1 ответ

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'
            }
        }
    }
});

рабочий код здесь

Ещё вопросы

Сообщество Overcoder
Наверх
Меню