Графический граф C3 с разными цветами для разных разделов

Question

Я использую библиотеку графов C3, чтобы нарисовать некоторые графики в моем приложении Javascript.

То, что я пытаюсь выполнить, состоит в том, чтобы нарисовать различные части разделов графиков линии в разных цветах. В частности, то, что я хочу достичь, заключается в том, что когда мой график уменьшается, что конкретный участок области (столбец) рисуется красным цветом до тех пор, пока значение не начнет расти снова, где оно должно вернуться к его синему цвету по умолчанию.

Я собрал простой JSFiddle, чтобы продемонстрировать то, что я в настоящее время:

c3.generate({ 
    bindto: "#chart", 
    data: { 
     columns: [ 
      ['data', 30, 200, 100, 400, 150, 250, 40, 134, 60], 
     ], 
     types: { 
      data: 'area' 
     } 
    } 
}); 

В этом примере я хочу раздел области (столбец) между индексом 1 и 2 должны быть окрашены в красный цвет.

Answer 1

Вы ча сделать это с помощью CSS:

.c3-event-rects{ 
    fill-opacity: 1!important; 
} 
.c3-event-rect{ 
    fill:#ccc; 
} 
.c3-event-rect.c3-event-rect-0{ 
    fill:#F0F4C3; 
} 
.c3-event-rect.c3-event-rect-1{ 
    fill:#8BC34A; 
} 
.c3-event-rect.c3-event-rect-2{ 
    fill:#00BCD4; 
} 

http://jsfiddle.net/MadalinaTn/j97ht8no/2/