javascript - 为 Google 阶梯面积图着色？

Question

是否可以单独为每个步骤着色？现在所有步骤都是蓝色的，但我想要第一步蓝色，第二步黄色，第三步红色，...

<div id="chart_div" style="width: 100%; height: 200px;"></div>
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Step', 'Equity'],
          ['1', -40],
          ['2', -40],
          ['3', -40],
          ['4', -40],
          ['5',     -30],
          ['6',     -30],
          ['7',        10],
          ['8',        10],
          ['9',        10],
          ['10',      50]
        ]);

        var options = {
        legend: 'none',
                vAxis: { ticks: [{v:-50, f:'0%'}, {v:0, f:'50%'}, {v:50, f:'100%'}] },
        enableInteractivity: false,
        hAxis: { textPosition: 'none' },
         chartArea:{top:10,left:40,bottom:10,right:5, width:"100%",height:"100%"},
        };

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

        chart.draw(data, options);
      }

Answer 1

您可以使用'样式' column role

请参阅以下工作片段...

google.charts.load('current', {
  callback: function () {

    var data = google.visualization.arrayToDataTable([
      ['Step', 'Equity', {role: 'style'}],  // <-- define style column
      ['1', -40, 'blue'],
      ['2', -40, 'yellow'],
      ['3', -40, 'red'],
      ['4', -40, 'green'],
      ['5', -30, 'purple'],
      ['6', -30, 'orange'],
      ['7', 10, 'cyan'],
      ['8', 10, 'indigo'],
      ['9', 10, 'magenta'],
      ['10',50, 'lime']
    ]);

    var options = {
      legend: 'none',
      vAxis: { ticks: [{v:-50, f:'0%'}, {v:0, f:'50%'}, {v:50, f:'100%'}] },
      enableInteractivity: false,
      hAxis: { textPosition: 'none' },
      chartArea:{top:10,left:40,bottom:10,right:5, width:"100%",height:"100%"},
    };

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

    chart.draw(data, options);
  },
  packages:['corechart']
});

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