Изменение цвета одиночного столбца в столбчатой ​​гистограмме C3.js

Question

Я пытаюсь выделить один набор значений в гистограмме c3.js. После this example Я могу изменить цвет одной строки в нестационарной строке, но я не могу понять, как идентифицировать индексы одного стека. My JS является:

var chart = c3.generate({ 
    bindto: '#chart1', 
    data: { 
    x: 'x', 
    columns: [ 
     ['x', "1ST", "2ND", "3RD", "4TH"], 
     ['A', 6, 8, 2, 9], 
     ['B', 3, 4, 1, 6], 
     ['C', 4, 4, 2, 4] 

    ], 
    type: 'bar', 
    groups: [ 
     ['A', 'B', 'C'] 
    ], 
    colors: { 
     A: '#666666', 
     B: '#cccccc', 
     C: '#428bca', 
    }, 
    order: 'asc' 
    }, 
    axis: { 
    x: { 
     type: 'category' 
    } 
    } 
}); 

И подход примера состоит в том, чтобы сделать:

color: function (color, f) { 
    return f.index === 4 ? "#dd0" : "#ddd"; 
} 

Работа в прогрессе JSFIDDLE. Как я могу получить индексы трех значений одного стека, а затем использовать их для изменения их цветов? Например, если я хочу выделить «2ND», изменив цвета на набор красных?

Answer 1

Адаптировано из примера здесь -> http://c3js.org/samples/data_color.html

color : function (color, d) { 
     return d.index && d.index === 2 ? "#dd0" : color; 
    }, 

https://jsfiddle.net/kmjpg30c/3/

d.index дает индекс стека - однако, в вашем примере нет индекса 4, как индексация начинается 0, поэтому у вас есть [0,1,2,3] в качестве возможного диапазона

Итак, проверьте индекс и верните новый цвет, если он соответствует, и если он не возвращает color, который первоначально проходил в.

(тест d.index присутствует как функция color привыкает от других подпрограмм, которые проходят в только строку, указывающую набор данных («А», «В», «С» в вашем примере), поэтому вам нужно проверить наличие необходимых полей в d.

Если вы хотите выделить только одну часть стека, используйте поле .id, а также, например, d.index === 2 && d.id === "A"