是否可以在谷歌饼图中以不同颜色显示每个图例

时间:2013-10-25 08:03:11

标签: google-visualization

是否可以在谷歌饼图中以不同颜色显示每个图例?我在饼图中有3个图例,我想用不同的颜色显示每个图例。

1 个答案:

答案 0 :(得分:1)

是的,来自google instructions

使用legend.textStyle选项并按其分配

Object  {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}    

指定图例文本样式的对象。该对象具有以下格式:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

颜色可以是任何HTML颜色字符串,例如:'red'或'#00cc00'。另请参见fontName和fontSize。

对于绘图中的每个pi图表

function drawChart() {//chart 1
    var data = google.visualization.arrayToDataTable([
      ['Language', 'Speakers (in millions)'],
      ['dataname1', 13], ['dataname2', 83],
    ]);

    var options = {
      title: 'chart 1',
      pieSliceText: 'label',
      legend.textStyle: { color: 'blue',  fontName: 'arial'}
      },
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart1'));
    chart.draw(data, options);
  }
function drawChart() {//chart 2
    var data = google.visualization.arrayToDataTable([
      ['Language', 'Speakers (in millions)'],
      ['dataname1', 13], ['dataname2', 83],
    ]);

    var options = {
      title: 'chart 2',
      pieSliceText: 'label',
      legend.textStyle: { color: 'red', fontName: 'arial'}
      },
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart2'));
    chart.draw(data, options);
  }    function drawChart() {//chart 3
    var data = google.visualization.arrayToDataTable([
      ['Language', 'Speakers (in millions)'],
      ['dataname1', 13], ['dataname2', 83],
    ]);

    var options = {
      title: 'chart 3',
      pieSliceText: 'label',
      legend.textStyle: { color: 'green',  fontName: 'arial'}
      },
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart3'));
    chart.draw(data, options);
  }