c3グラフの背景領域

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線の代わりに、陰影のある領域にしたいと思います。例えば

：89

0は赤色になり、

89〜92はオレンジであろうと100

92は緑色であろう。

C3とD3でこれを行うにはどうしますか？

よろしく、あなたがCSSでこれを行うことができ

Answer 1

jmcall10：あなたは "!important" タグを使用したくない場合は、jQueryを使ってスタイルを追加することができます

.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; 
} 

または、既定では.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。