javascript - 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/