Как получить разные цвета для разных диапазонов значений в простых линейных графиках Google?

Question

Как получить разные цвета для разных диапазонов значений в простых линейных графиках Google?

1

Вот мой 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);
    }

Dinesh Gupta 08 июнь 2017, в 17:14

Источник

Теги:

javascript

google-visualization

1 ответ

Ещё вопросы

WhiteHat · Accepted Answer · 2017-06-08T12-20-00.000Z

используйте столбец стиля, см. следующий рабочий фрагмент...

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>