Google可視化圖表區域背景

Question

我在Y軸上的值之間存在背景顏色問題。我需要不同的值之間的背景顏色。

google.load("visualization", "1", { packages: ['corechart', 'line'] }); 
    var abChartCtrl = angular.module('abChartCtrl', []); 
    abChartCtrl.controller('abctrl', ['$scope', function ($scope) { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('number', ''); 
    data.addColumn('number', ''); 

data.addRows([ 
    [0, 0], [1, 10], [2, 23], [3, 17], [4, 18], [5, 9], 
    [6, 11], [7, 27], [8, 33], [9, 40], [10, 32], [11, 35], 
    [12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48], 
    [18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57], 
    [54, 71], [55, 72], [56, 73], [57, 75], [58, 70], [59, 68], 
    [60, 64], [61, 60], [62, 65], [63, 67], [64, 68], [65, 69], 
    [66, 70], [67, 72], [68, 75], [69, 80], [69, 70], [79, 60] 
]); 
var options = { 
    width: '100%', 
    height: '100%', 
    chartArea: { 
     width: '90%', 
     height: '80%', 
     backgroundColor: '#E4E4E4', 
    }, 
    legend: { 
     position: 'none' 
    } 
}; 

var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 

chart.draw(data, options);}]); 

我的圖表顯示：

我想是這樣的：

Answer 1

這是回答

var dataTable = new google.visualization.DataTable({ 
      cols: [ 
       { label: 'Time', type: 'number' }, 
       { label: 'Low', type: 'number' }, 
       { label: 'LowAvg', type: 'number' }, 
       { label: 'Avg', type: 'number' }, 
       { label: 'AvgHigh', type: 'number' }, 
       { label: 'High', type: 'number' }, 
       { label: 'Test', type: 'number' } 
      ], 
      rows: [ 
       { c: [{ v: 0 }, { v: 60 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 0 }] }, 
       { c: [{ v: 5 }, { v: 60 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 24 }] }, 
       { c: [{ v: 10 }, { v: 60 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 20 }] }, 
       { c: [{ v: 15 }, { v: 60 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 48 }] }, 
       { c: [{ v: 20 }, { v: 60 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 53 }] }, 
       { c: [{ v: 25 }, { v: 60 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 81 }] }, 
       { c: [{ v: 30 }, { v: 60 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 33 }] }, 
       { c: [{ v: 40 }, { v: 60 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 66 }] }, 
       { c: [{ v: 45 }, { v: 60 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 50 }] }, 
       { c: [{ v: 50 }, { v: 60 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 75 }] }, 
       { c: [{ v: 55 }, { v: 60 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 38 }] }, 
       { c: [{ v: 60 }, { v: 60 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 40 }] }, 
       { c: [{ v: 65 }, { v: 60 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 65 }] }, 
       { c: [{ v: 70 }, { v: 60 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 80 }] }, 
       { c: [{ v: 80 }, { v: 60 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 45 }] } 
      ] 
     }); 

     var options = { 
      width: '100%', 
      height: '100%', 
      chartArea: { 
       width: '90%', 
       height: '80%', 
      }, 
      legend: { 
       position: 'none' 
      }, 
      /* hAxis: { 
       ticks: [0, 15, 30, 45, 60], 
      }, */ 
      isStacked: true, 
      series: { 
       // Low 
       0: { 
        areaOpacity: 0.6, 
        color: '#959595', 
        visibleInLegend: false 
       }, 

       // LowAvg 
       1: { 
        areaOpacity: 0.6, 
        color: '#00BFF3', 
        visibleInLegend: false 
       }, 

       // Avg 
       2: { 
        areaOpacity: 0.6, 
        color: '#3AB54A', 
        visibleInLegend: false 
       }, 
       3: { 
        areaOpacity: 0.6, 
        color: '#FEF568', 
        visibleInLegend: false 
       }, 

       // High 
       4: { 
        areaOpacity: 0.6, 
        color: '#ED1B24', 
        visibleInLegend: false 
       }, 

       // Test - color of chart 
       5: { 
        color: '#01579B', 
        type: 'line' 
       } 
      }, 
      seriesType: 'area', 
      vAxis: { 
       ti1cks: [0, 25, 50, 75, 100] 
      } 
     };