c3图表背景区域

我有一个c3图表，我工作到目前为止工作。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

来源

2016-08-14 jmcall10

您可以使用渐变作为背景。 –

您可以用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; 
}

，或者您可以使用jQuery添加的风格，如果你不希望使用 “!important” 标签，因为默认情况下，.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。

来源

2016-08-14 10:41:08

您填充的区域从左到右。我想要它从底部到顶部。你能提供另一种解决方案吗？亲切的问候。 – jmcall10

@ jmcall10下一次，请将所有细节添加到问题中。我会为您的问题检查我的解决方案。 –

@ jmcall10水平图表是可能的，如http://jsfiddle.net/MadalinaTn/j7b16Lmt/5/，类似http://jsfiddle.net/MadalinaTn/j7b16Lmt/6/。我不明白你需要垂直图表的水平线，这是不可能的，因为svg没有定义这些区域。 –

c3图表背景区域

回答

相关问题