javascript - 如何在简单的谷歌折线图中为不同的值范围使用不同的颜色？

Question

这是我的 JS fiddle 。根据我在 Y 轴中指定的值 0、10、23、17、18 等，我希望 0-10 的线具有不同的颜色，10-23 具有不同的颜色，23-17 a不同的颜色。

https://jsfiddle.net/pyvqcbou/

这是我的 JS。我尝试向不同的地方添加颜色，但我无法做到这一点。我该怎么办？

function drawBasic() {    
     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],
      ]);

     var options = {
          height: 152,
          legend: 'none',
          baselineColor: '#fff',
          gridlineColor: '#fff',
          textPosition: 'none',
          colors: ['#ff926c'],
          dataOpacity: 0.7,
          hAxis: {
            textPosition: 'none'
           },
           vAxis: {                            
              textPosition: 'none',
            },
      };      

     var chart = new google.visualization.LineChart(document.getElementById('chart_div'));    
     chart.draw(data, options);
    }

Answer 1

使用样式列，请参阅以下工作片段...

google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBasic);

function drawBasic() {

     var data = new google.visualization.DataTable();
      data.addColumn('number', '');
      data.addColumn('number', '');
      data.addColumn({type: 'string', role: 'style'});

     data.addRows([
        [0, 0, 'red'],   [1, 10, 'blue'],  [2, 23, 'green'],  [3, 17, 'orange'],  [4, 18, 'purple'],  [5, 9, 'black'],
      ]);

     var options = {
          height: 152,
          legend: 'none',
          baselineColor: '#fff',
          gridlineColor: '#fff',
          textPosition: 'none',
          colors: ['#ff926c'],
          dataOpacity: 0.7,
          hAxis: {
            textPosition: 'none'
           },
           vAxis: {                            
              textPosition: 'none',
            },
      };
  

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

     chart.draw(data, options);
    }

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