19

嗨，我正在尝试在我的饼图切片中应用颜色。我正在使用谷歌图表 API。

在这里你得到了所有的饼图信息：https ://google-developers.appspot.com/chart/interactive/docs/gallery/piechart

这是我在说什么的捷径：

slices 对象数组，或带有嵌套对象的对象 {} 对象数组，每个对象描述饼图中对应切片的格式。要使用切片的默认值，请指定一个空对象 {}。如果未指定切片或值，则将使用全局值。每个对象都支持以下属性：

color - 用于此切片的颜色。指定一个有效的 HTML 颜色字符串。textStyle - 覆盖此切片的全局 pieSliceTextSlice。您可以指定一个对象数组，每个对象按给定顺序应用于切片，或者您可以指定一个对象，其中每个子对象都有一个数字键，指示它适用于哪个切片。例如，以下两个声明是相同的，将第一个切片声明为黑色，第四个切片声明为红色：

切片：[{color: 'black', {}, {}, {color: 'red'}] 切片：{0: {color: 'black'}, 3: {color: 'red'}}

不知道我应该把这段代码放在哪里，这里是操场：https ://code.google.com/apis/ajax/playground/?type=visualization#pie_chart

这是我的尝试（不起作用）

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work', 11],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 7]
  ]);

  // Create and draw the visualization.
  new google.visualization.PieChart(document.getElementById('visualization')).
      draw(data, {title:"So, how was your day?", slices: [{color: 'black', {color: 'blue'}, {color: 'green'}, {color: 'red'}, {color: 'white'}]});
}
​

谢谢你的时间。///////////////////////////////////////// /////////////////////////////////

编辑：

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities',
          slices: {0: {color: '#006EFF'}, 1:{color: '#00FF08'}, 2:{color: 'blue'}, 3: {color: 'red'}, 4:{color: 'grey'}}
        };

        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

注：我用过

slices: {0: {color: '#006EFF'}, 1:{color: '#00FF08'}, 2:{color: 'blue'}, 3: {color: 'red'}, 4:{color: 'grey'}}

反而

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

再见。

4

1 回答 1

36

您可以使用以下方法更改饼图切片的默认颜色：

var options = {
  width: 400,
  height: 240,
  title: 'Toppings I Like On My Pizza',
  colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']
};
于 2013-10-26T21:42:22.923 回答