谷歌图表：如何更改负值的颜色

Question

我目前使用 GoogleCharts 有一个不错的 AreaChart，但是当值为负数时，我正在尝试更改图表的颜色和背景颜色。

根据我的发现，我的想法是仅显示一个区域用于正值，而另一个区域用于负值，以便我可以自定义颜色。但是您可以在下面看到我并没有真正成功。

有什么想法吗？ 谢谢， 蒂姆

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的任何调用

同时提供所有列

列数组可以包含...
一个整数作为对数据表列索引的引用
或自定义函数的对象

请参阅以下工作 sn-p...

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>