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圖表背景區域

回答

相關問題