Разноцветная линейная диаграмма с гугл-визуализацией

Я использую линейную диаграмму Google в своем проекте и сталкиваюсь с проблемой, что мне нужно изменить цвет для некоторых сегментов, чтобы визуализировать изменения целевого состояния с течением времени. Это должно выглядеть так:

Я долго искал, но не смог найти способ сделать это с помощью Google Chart. Мой обходной путь - добавить еще одну серию на график и поочередно установить значение второй строки эквалайзера на первую строку в зависимости от состояния, но это выглядит утомительно.

Есть ли правильный способ сделать это? Вот пример моего решения:

function drawMultipleTrendlineChart() {

  var chart;

  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Sales value A');
  data.addColumn('number', 'Sales value B');

  data.addRows([
    [new Date(2013, 3, 11), 200, 0],
    [new Date(2013, 4, 02), 500, 0],
    [new Date(2013, 5, 03), 700, 0],
    [new Date(2013, 6, 04), 800, 800],
    [new Date(2013, 7, 05), 500, 500],
    [new Date(2013, 8, 06), 900, 0],
    [new Date(2014, 0, 07), 800, 0],
    [new Date(2014, 1, 08), 1100, 1100],
    [new Date(2014, 2, 09), 1000, 1000],
    [new Date(2014, 2, 10), 1000, 0],
    [new Date(2014, 3, 11), 800, 0],
  ]);


  var formatter = new google.visualization.NumberFormat({
    fractionDigits: 2,
    prefix: 'R$:'
  });
  formatter.format(data, 1);
  var dateFormatter = new google.visualization.NumberFormat({
    pattern: 'MMM yyyy'
  });
  dateFormatter.format(data, 0);
  var chartHeight = 400;
  var chartWidth = 600;
  var chartOptions = {
    tooltip: {
      isHtml: true
    },
    title: 'Trendlines with multiple lines',
    isStacked: true,
    width: chartWidth,
    height: chartHeight,
    colors: ['#0000D8', '#00dddd'],
    hAxis: {
      title: 'example title',
      slantedText: false,
      slantedTextAngle: 45,
      textStyle: {
        fontSize: 10
      },
      format: 'dd-MM-yyyy'
    },
    chartArea: {
      left: 50,
      top: 20,
      width: (chartWidth - 10),
      height: (chartHeight - 90)
    }
  };
  chart = new google.visualization.LineChart(document.getElementById('multipleTrendChart'));
  chart.draw(data, chartOptions);
}

google.load('visualization', '1', {
  packages: ['corechart'],
  callback: drawMultipleTrendlineChart
});
<html>

<head>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  </script>
</head>

<body>
  <div id="multipleTrendChart"></div>
</body>

</html>

Источник

1 ответ

Посмотрев на этот ответ, Как изменить цвет для отрицательных значений, я попытался, и это работает для меня. Ответ заключается в использовании DataView API для манипулирования данными.

google.charts.load('current', {
  callback: drawLineColors,
  packages: ['corechart']
});

function drawLineColors() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'X');
  data.addColumn('number', 'Blue Team');
  data.addColumn('number', 'Red Team');

  data.addRows([
    [0, 0, 0],
    [3, 1700, 1600],
    [6, 1800, 1700],
    [9, 2500, 2423],
    [12, 3000, 2500],
    [15, 4700, 5800],
    [18, 5200, 5900],
    [21, 5500, 6000],
    [24, 6000, 6200],
    [27, 6800, 6700],
    [30, 7500, 7000],
    [33, 7800, 8200],
    [36, 7900, 9756],
    [39, 8000, 10752],
    [42, 9000, 13753],
    [45, 15000, 17845]
  ]);

  var options = {
    legend: {
      position: 'top'
    },
    enableInteractivity: false,
    width: 712,
    height: 156,
    backgroundColor: {
      fill: 'transparent'
    },
    curveType: 'function',
    hAxis: {
      title: 'Time'
    },
    vAxis: {
      title: 'Team Gold'
    }
  };

  var dataView = new google.visualization.DataView(data);
  dataView.setColumns([
    // reference first column by index
    0,
    // variance
    {
      calc: function(data, row) {
        return data.getValue(row, 1);
      },
      type: 'number',
      label: 'Y'
    },
    // variance color
    {
      calc: function(data, row) {
        var val = data.getValue(row, 2) - data.getValue(row, 1);
        if (val >= 0) {
          return '#0000FF';
        }
        return '#FF0000';
      },
      type: 'string',
      role: 'style'
    }
  ]);

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(dataView, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Источник
Другие вопросы по тегам