Google Chart: как изменить цвет для отрицательных значений

Question

В настоящее время у меня есть хорошая AreaChart с использованием GoogleCharts, однако я пытаюсь изменить цвет и цвет фона диаграммы, когда значения отрицательные.

Исходя из того, что я обнаружил, идея заключалась в том, чтобы отображать одну область только для положительных значений, а другую - для отрицательных значений, чтобы я мог настраивать цвета. Однако, как вы можете видеть ниже, мне не удалось это сделать.

Любая идея? Спасибо Тим

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

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'
    },
    colors: ['#FF0000', '#0000FF']
  };

  var dataView = new google.visualization.DataView(data);
  dataView.setColumns([0, {
    calc: function(data, row) {
      return data.getValue(row, 2) - data.getValue(row, 1);
    },
    type: 'number',
    label: 'Blue'
  }]);


  dataView.setColumns([1, {
    calc: function(data, row) {
      return data.getValue(row, 1) - data.getValue(row, 2);
    },
    type: 'number',
    label: 'Red'
  }]);

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(dataView, options);
}

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

Answer 1

Опция конфигурации для colors сопоставляет цвет каждой серии

в этом случае есть только один ряд (или столбец) - дисперсия

вместо этого используйте style роль столбца, чтобы определить цвет для каждой строки

также: используя setColumns несколько раз перезаписывает все предыдущие вызовы setColumns

предоставить все столбцы одновременно

массив столбцов может содержать...
целое число как ссылка на индекс столбца таблицы данных
или объект для пользовательской функции

см. следующий рабочий фрагмент...

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, 2) - 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>

РЕДАКТИРОВАТЬ

или если вы хотите отдельные строки для каждой команды...

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'
    },
    colors: ['#0000FF', '#FF0000']
  };

  var dataView = new google.visualization.DataView(data);
  dataView.setColumns([
    // reference first column by index
    0,
    // team Y is better
    {
      calc: function(data, row) {
        var val = data.getValue(row, 2) - data.getValue(row, 1);
        if (val > 0) {
          return val;
        }
        return null;
      },
      type: 'number',
      label: 'Blue'
    },
    // team X is better
    {
      calc: function(data, row) {
        var val = data.getValue(row, 1) - data.getValue(row, 2);
        if (val > 0) {
          return val;
        }
        return null;
      },
      type: 'number',
      label: 'Red'
    },
  ]);

  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>