着色Google Stepped Area Charts？

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

你可以使用一個'style'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>