구글 라인 차트의 가변 배경색

Question

저는 꽤 간단한 구글 라인 차트를 그리기를 원합니다. 그러나 차트 영역에 가로/세로 색 밴드가있어서 낮은/중간/높은 값을 나타냅니다.

도표 API를 보면, 내가 설정할 수있는 유일한 값인 chartArea.backgroundColor처럼 보이기 때문에 가능한 직접적으로 보이지 않습니다.

차트의 제한 사항 인 것으로 알고 있으므로 다른 방법이나 자바 스크립트 마법사를 통해 다른 방식으로이를 다시 만들 수 있습니까?

다음은 내가 생산하고자하는 효과의 예입니다.

미리 감사드립니다. 사용

Answer 1

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>