文章/答案/技术大牛

发布

社区首页 >问答首页 >谷歌图表:如何改变负值的颜色

问谷歌图表:如何改变负值的颜色
EN

Stack Overflow用户

提问于 2016-10-19 17:15:41

回答 1查看 3.4K关注 0票数 1

我目前有一个不错的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>

javascript

charts

google-visualization

回答 1

Stack Overflow用户

发布于 2016-10-19 17:47:34

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>

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/40137715

复制

相似问题

问谷歌图表:如何改变负值的颜色
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问谷歌图表:如何改变负值的颜色EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问谷歌图表:如何改变负值的颜色
EN