谷歌折線圖中的可變背景顏色

我正在尋找繪製一個相當簡單的谷歌LineChart，但我希望橫跨圖表區域有水平綵帶，以指示低/中/高值。谷歌折線圖中的可變背景顏色

看看圖表API，它似乎不可能是直接的，因爲chartArea.backgroundColor似乎是我可以設置的唯一值。

意識到這似乎是圖表的限制，是否有可能通過任何其他方式或通過任何其他方法重新創建此javascript wizardry？

下面是我期望產生什麼樣的效果的例子。

在此先感謝。

來源

2016-09-23 Kris Dunning

你可以使用一個組合圖，用堆積面積系列以應用陰影。 .. – WhiteHat

感謝您的評論，但我不太確定這會工作。也許對於垂直色區域，但不適合我之後的區域。也許我錯了，你可以在jsfiddle中嘲笑一些東西來證明你的意思嗎？ –

使用ComboChart

與seriesType: 'area'

和isStacked: true

需要

visibleInLegend: false你可以定義爲許多範圍隱藏的傳說

然後你可以在區域系列爲自定義type:你要跟蹤的系列，
如'line'，在下面的工作片段...

google.charts.load('current', { 
 
    callback: function() { 
 
    var dataTable = new google.visualization.DataTable({ 
 
     cols: [ 
 
     {label: 'Time', type: 'number'}, 
 
     {label: 'Low', type: 'number'}, 
 
     {label: 'Avg', type: 'number'}, 
 
     {label: 'High', type: 'number'}, 
 
     {label: 'Dogs', type: 'number'} 
 
     ], 
 
     rows: [ 
 
     {c:[{v: 0}, {v: 25}, {v: 50}, {v: 25}, {v: 0}]}, 
 
     {c:[{v: 5}, {v: 25}, {v: 50}, {v: 25}, {v: 24}]}, 
 
     {c:[{v: 10}, {v: 25}, {v: 50}, {v: 25}, {v: 20}]}, 
 
     {c:[{v: 15}, {v: 25}, {v: 50}, {v: 25}, {v: 48}]}, 
 
     {c:[{v: 20}, {v: 25}, {v: 50}, {v: 25}, {v: 53}]}, 
 
     {c:[{v: 25}, {v: 25}, {v: 50}, {v: 25}, {v: 61}]}, 
 
     {c:[{v: 30}, {v: 25}, {v: 50}, {v: 25}, {v: 63}]}, 
 
     {c:[{v: 40}, {v: 25}, {v: 50}, {v: 25}, {v: 66}]}, 
 
     {c:[{v: 45}, {v: 25}, {v: 50}, {v: 25}, {v: 70}]}, 
 
     {c:[{v: 50}, {v: 25}, {v: 50}, {v: 25}, {v: 75}]}, 
 
     {c:[{v: 55}, {v: 25}, {v: 50}, {v: 25}, {v: 78}]}, 
 
     {c:[{v: 60}, {v: 25}, {v: 50}, {v: 25}, {v: 80}]}, 
 
     {c:[{v: 65}, {v: 25}, {v: 50}, {v: 25}, {v: 85}]}, 
 
     {c:[{v: 70}, {v: 25}, {v: 50}, {v: 25}, {v: 90}]} 
 
     ] 
 
    }); 
 

 
    var options = { 
 
     chartArea: { 
 
     width: '60%' 
 
     }, 
 
     hAxis: { 
 
     ticks: [0, 15, 30, 45, 60], 
 
     title: 'Time' 
 
     }, 
 
     isStacked: true, 
 
     series: { 
 
     // low 
 
     0: { 
 
      areaOpacity: 0.6, 
 
      color: '#FFF59D', 
 
      visibleInLegend: false 
 
     }, 
 

 
     // avg 
 
     1: { 
 
      areaOpacity: 0.6, 
 
      color: '#A5D6A7', 
 
      visibleInLegend: false 
 
     }, 
 

 
     // high 
 
     2: { 
 
      areaOpacity: 0.6, 
 
      color: '#EF9A9A', 
 
      visibleInLegend: false 
 
     }, 
 

 
     // dogs 
 
     3: { 
 
      color: '#01579B', 
 
      type: 'line' 
 
     } 
 
     }, 
 
     seriesType: 'area', 
 
     title: 'Example', 
 
     vAxis: { 
 
     ti1cks: [0, 25, 50, 75, 100], 
 
     title: 'Popularity' 
 
     } 
 
    }; 
 

 
    var chart = new google.visualization.ComboChart(document.getElementById('chart_div')); 
 
    chart.draw(dataTable, options); 
 
    }, 
 
    packages:['corechart'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

來源

2016-09-24 00:53:58 WhiteHat

這應該讓你接近... – WhiteHat

絕對精彩！感謝：D –

谷歌折線圖中的可變背景顏色

回答

相關問題