着色Google Stepped Area Charts？

问题描述

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

 < div id =chart_divstyle =width：100％; height：200px;>< / div> 
 google.charts.load（'current'，{'packages'：['corechart']}）; 
 google.charts.setOnLoadCallback（drawChart）; 
 $ b函数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）; 
 
  

解决方案

您可以使用'style'

请参阅下面的工作片段...

  google.charts.load（'current'，{callback：function（）{var data = google.visualization.arrayToDataTable（[['Step'，'Equity' ，{role：'style'}]，//<  - 定义样式column ['1'，-40，'blue']，['2'，-40，'yellow']，['3' -40，'red']，['4'，-40，'green']，['5'，-30，'purple']，['6'，-30，'orange']，['7 '，10，'青色']，['8'，10'，'靛蓝']，['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（数据，选项）; }，packages：['corechart']}）;   
 

is it possible to color each step indivual? Now all steps are blue but I want the first step blue, second yellow, third red, ...

<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);
      }

解决方案

you can use a 'style' column role

see following working snippet...

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>

这篇关于着色Google Stepped Area Charts？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！