Question

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

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

有什么想法吗？谢谢，添

＆＃13;

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

＆＃13;

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

＆＃13;

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>

Google Chart：如何更改负值的颜色

1 个答案: