Question

我有一张我工作的c3图表到目前为止。

var chart = c3.generate({
     bindto: '#chart',
data: {
  x: 'x',
  xFormat:'%H:%M',
    columns: [
    ["x", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00"],
     ["line 1" , 50, 60, 70, 80],
     ["line 2", 80, 85, 90,98],
     ["line 3", 50, 90, 95,60],
     ["line 4", 100, 80, 50,60]
    ],
     colors: {
        "line 1": '#4575b4',
        "line 2": '#d73027',
        "line 3": '#FF0000',
        "line 4": '#AEAEAE'
    },
},
axis: {
    x: {
        type: 'timeseries',
         max: '23:00',
        tick: {
           values: ["01:00", "02:00", "03:00","04:00","05:00","06:00","07:00","08:00","09:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00","17:00","18:00","19:00","20:00","21:00","22:00","23:00"],
            format: '%H:%M',
            fit: false
    }
    },
    y: {
    max: 100,
    min: 40,
    padding: {top: 0, bottom:0}
}
},
grid: {
 y: {
    lines: [
            {value: 89},{value: 92}
        ]
 },
 x: {
lines: [
  {value: "2016-01-08", text: "Want to rorate this text in 180 degrees",
  class: "xLineLable", position: "end"}
]   }   }});

然而，我希望它们不是网格Y线，而是阴影区域。

例如：

0到89会变红，

89到92将是橙色和

92到100将是绿色。

无论如何使用C3和D3进行此操作？

此致

jmcall10

Answer 1

您可以使用css：

执行此操作

.c3-event-rects{
    fill-opacity: 1!important;
}
.c3-event-rect{
    fill:#ccc;
}
.c3-event-rect.c3-event-rect-0{
    fill:green;
}
.c3-event-rect.c3-event-rect-1{
    fill:red;
}

如果您不想使用＆＃34; !important＆＃34;或者您可以使用jquery添加样式tag，因为默认情况下，.c3-event-rects的不透明度为0，而syle是内联的。 http://jsfiddle.net/MadalinaTn/j7b16Lmt/4/

更新：如果您需要将行作为背景，请考虑水平图表。为此，您可以使用：

axis: {
    rotated: true,
    x: {
        type: 'timeseries'
    }
}

如果此解决方案不够好，我可以向您推荐我使用的图表，我认为它更适合您需要的设计：http://www.highcharts.com/demo/spline-plot-bands。

c3图表背景区域

1 个答案: