首页 文章

谷歌可视化 - 设置饼图切片颜色

提问于
浏览 次
1

我有一个用于饼图的数据表，我需要根据行中的值设置切片的颜色 . 例如，我有一个按类型划分的汽车销售表（例如租赁，现金，财务），我想为每一个指定颜色 . 在文档中，似乎可以使用条形图执行此操作，但我似乎无法使用切片执行此操作 . 我尝试了以下方法：

var pieChart = new google.visualization.ChartWrapper({
    options : {
        ...
        slices: [{color: 'black'}, {color: 'green'}, {color: 'red'}]
    }
});

颜色得到渲染，但我想为 lease 指定 black . 关于如何让这个工作的任何想法？

charts google-visualization

1 回答

  • 5

    slices 数组中的颜色应与数据表中的行的顺序相同

    所以，有以下几行......

    data.addRows([
  ['Cash', 5],
  ['Finance', 20],
  ['Lease', 15]
]);

    对于 'Lease' 为黑色，它应该是数组中的最后一种颜色

    slices: [{color: 'green'}, {color: 'red'}, {color: 'black'}]

    如果行的顺序未知，您可以动态设置颜色

    使用对象为颜色创建 Map

    // create color map
var colors = {
  'Cash': 'green',
  'Finance': 'red',
  'Lease': 'black'
};

    然后根据数据表中的值构建切片数组

    // build slices
var slices = [];
for (var i = 0; i < data.getNumberOfRows(); i++) {
  slices.push({
    color: colors[data.getValue(i, 0)]
  });
}

    请参阅以下工作代码段...

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

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'sales');
  data.addColumn('number', 'count');
  data.addRows([
    ['Cash', 5],
    ['Finance', 20],
    ['Lease', 15]
  ]);
  data.sort([{column: 1, desc: true}]);

  // create color map
  var colors = {
    'Cash': 'green',
    'Finance': 'red',
    'Lease': 'black'
  };

  // build slices
  var slices = [];
  for (var i = 0; i < data.getNumberOfRows(); i++) {
    slices.push({
      color: colors[data.getValue(i, 0)]
    });
  }

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.PieChart(container);
  chart.draw(data, {
    slices: slices
  });
}

    <script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
    回复于

相关问题