是否有可能在谷歌饼图中以不同颜色显示每个图例 [英] Is it possible to show each legend in different color in google pie chart

问题描述

是否可以在Google饼图中以不同颜色显示每个图例？我在饼图中有3个传说，我想用不同的颜色显示每个人。

a href =https://developers.google.com/chart/interactive/docs/gallery/piechart =nofollow> google说明：

使用 legend.textStyle 选项并像这样分配它

 对象{color：'black'，fontName：< global-font-name> ;, fontSize：< global-font-size>} 
  pre> 
 
 
一个指定图例文本样式的对象。该对象的格式如下：
 $ b 
  {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 ，
 ['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）; 
 
函数drawChart（）{//图表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）; 
} 
  

Is it possible to show each legend in different color in google pie chart? I have 3 legends in my pie chart and i want to show each one of them in different color.

解决方案

Yes, from google instructions:

use the legend.textStyle option and assign it like so

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

An object that specifies the legend text style. The object has this format:

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

The color can be any HTML color string, for example: 'red' or '#00cc00'. Also see fontName and fontSize.

so for each pi chart in the drawchart

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

这篇关于是否有可能在谷歌饼图中以不同颜色显示每个图例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！