c3 chart hintergrundbereich

Question

Ich habe ein c3-Diagramm, dass ich arbeite, das funktioniert so weit.

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"} 
] } }}); 

Aber statt der Y-Linien Gitter ich möchte, dass sie schattierte Bereiche sind.

Zum Beispiel:

0-89 rot wäre,

89-92 wäre orange und

92-100 würde grün sein.

Gibt es das überhaupt mit C3 und D3?

Grüße,

jmcall10

Answer 1

Sie dies mit CSS tun können:

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

oder Sie den Stil mit jquery hinzufügen können, wenn Sie "!important" Tag nicht verwenden möchten, weil die Deckkraft für .c3-event-rects standardmäßig 0 ist und der Stil inline ist. http://jsfiddle.net/MadalinaTn/j7b16Lmt/4/

Update: Wenn Sie Zeilen als Hintergrund benötigen, beachten Sie bitte ein horizontales Diagramm. Dafür können Sie:

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

Wenn diese Lösung nicht gut genug ist, kann ich Ihnen ein Diagramm empfehle ich verwendet, und ich denke, es ist besser geeignet für das Design, die Sie benötigen: http://www.highcharts.com/demo/spline-plot-bands.