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/

C3区域线图与不同的颜色为不同的部分

1 个答案: