是否可以在Google条形图中为不同的数据行使用不同的图例背景颜色，而不打破图表？

问题描述

查看示例代码：

  var data = new google.visualization.DataTable（）; 
 data.addColumn（'string'，'Mac'）; 
 data.addColumn（'number'，'Score'）; 
 data.addColumn（{type：'string'，role：'style'}）; 
 data.addRows（[
 ['Mac model 12'，200，'color：＃8bba30; opacity：0.75;']，
 ['Another Mac Model'，110，'color ：＃ffcc33; opacity：0.75;']，
]）; 
 var options = {
 title：''，
 width：500，
 height：data.getNumberOfRows（）* 40 + 100，
 hAxis：{
 minValue：0，
 maxValue：255，
 ticks：[0,75,150,255]，
 textPosition：'out'，
 side：'top'
}，
系列：{
 0：{axis：'Mac'}，
 1：{axis：'Score'} 
}，
 chartArea ：{
 top：0，
 bottom：50，
 right：50，
 left：150 
}，
 legend：{position：'none '}，
 fontSize：12，
 bar：{groupWidth：'75％'}，
}; 
 var chart = new google.visualization.BarChart（document.getElementById（'apple_div'））; 
 chart.draw（data，options）; 
} 
  

这是输出：

看到，不同的酒吧有不同的颜色。但我想要左侧不同的传说的不同的颜色和/或背景颜色。

有人可以帮我这个吗？

我发现以下答案，。

但它建议在打破图表

解决方案

不确定是什么 ，但是...

您可以修改图表svg，一旦 '事件触发。

此示例更改图例文字的颜色以匹配栏颜色。

  google.charts.load（'current'，{callback：drawChart，packages：['corechart']}）; function drawChart（）{var colors = ['＃8bba30'，'＃ffcc33']; var data = new google.visualization.DataTable（）; data.addColumn（'string'，'Mac'）; data.addColumn（'number'，'Score'）; data.addColumn（{type：'string'，role：'style'}）; data.addRows（[['Mac model 12'，200，'color：'+ colors [0] +'; opacity：0.75;']，['Another Mac Model'，110，'color：'+ colors [1 ] +;;不透明度：0.75;']，]）; var options = {title：''，width：500，height：data.getNumberOfRows（）* 40 + 100，hAxis：{minValue：0，maxValue：255，ticks：[0,75,150,255]，textPosition： 'top'}，series：{0：{axis：'Mac'}，1：{axis：'Score'}}，chartArea：{top：0，bottom：50，right： left：150}，legend：{position：'none'}，fontSize：12，bar：{groupWidth：'75％'} var chartContainer = document.getElementById（'apple_div'）; var chart = new google.visualization.BarChart（chartContainer）; google.visualization.events.addListener（chart，'ready'，function（）{var labels = chartContainer.getElementsByTagName（'text'）; var colorIndex = 0; for（var i = 0; i< labels.length; i ++ ）{if（labels [i] .getAttribute（'text-anchor'）==='end'）{labels [i] .setAttribute（'fill'，colors [colorIndex]）; colorIndex ++;}}}）; chart.draw（data，options）;}  

  script src =https://www.gstatic.com/charts/loader.js>< / script>< div id =apple_div>< / div>  / pre> 

对于背景颜色，

所以你必须绘制自己的 rect ...

See the example code:

var data = new google.visualization.DataTable();
    data.addColumn('string', 'Mac');
    data.addColumn('number', 'Score');
    data.addColumn({ type: 'string', role: 'style' });
    data.addRows([
       ['Mac model 12', 200, 'color: #8bba30; opacity: 0.75;'],
       ['Another Mac Model', 110, 'color: #ffcc33; opacity: 0.75;'],
    ]);
    var options = {
        title: '',
        width: 500,
        height: data.getNumberOfRows() * 40 + 100,
        hAxis: {
            minValue: 0,
            maxValue: 255,
            ticks: [0, 75, 150, 255],
            textPosition: 'out',
            side: 'top'
        },
        series: {
            0: { axis: 'Mac' },
            1: { axis: 'Score' }
        },
        chartArea: {
            top: 0,
            bottom: 50,
            right: 50,
            left: 150
        },
        legend: { position: 'none' },
        fontSize: 12,
        bar: {groupWidth: '75%'},
    };
    var chart = new google.visualization.BarChart(document.getElementById('apple_div'));
    chart.draw(data, options);
}

This is the output:

See, there are different colors for different bars. But I want different color and/or background-color for different legends on left side.

Can someone help me with this please?

I found following answer, Is it possible to show each legend in different color in google pie chart.

But it suggests on breaking down the chart(i.e. to draw separate charts for each rows), which is not desirable as there are large numbers of rows.

解决方案

Not sure what you mean by breaking the chart, but...

You can modify the chart svg, once the 'ready' event fires.

This example changes the color of the legend text to match the bar color.

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

function drawChart() {
  var colors = ['#8bba30', '#ffcc33'];
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Mac');
  data.addColumn('number', 'Score');
  data.addColumn({ type: 'string', role: 'style' });
  data.addRows([
     ['Mac model 12', 200, 'color: ' + colors[0] + '; opacity: 0.75;'],
     ['Another Mac Model', 110, 'color: ' + colors[1] + '; opacity: 0.75;'],
  ]);
  var options = {
      title: '',
      width: 500,
      height: data.getNumberOfRows() * 40 + 100,
      hAxis: {
          minValue: 0,
          maxValue: 255,
          ticks: [0, 75, 150, 255],
          textPosition: 'out',
          side: 'top'
      },
      series: {
          0: { axis: 'Mac' },
          1: { axis: 'Score' }
      },
      chartArea: {
          top: 0,
          bottom: 50,
          right: 50,
          left: 150
      },
      legend: { position: 'none' },
      fontSize: 12,
      bar: {groupWidth: '75%'},
  };

  var chartContainer = document.getElementById('apple_div');
  var chart = new google.visualization.BarChart(chartContainer);
  google.visualization.events.addListener(chart, 'ready', function () {
    var labels = chartContainer.getElementsByTagName('text');
    var colorIndex = 0;
    for (var i = 0; i < labels.length; i++) {
      if (labels[i].getAttribute('text-anchor') === 'end') {
        labels[i].setAttribute('fill', colors[colorIndex]);
        colorIndex++;
      }
    }
  });
  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="apple_div"></div>

As for background color, SVG elements do not have background
so you would have to draw your own rect for that...

这篇关于是否可以在Google条形图中为不同的数据行使用不同的图例背景颜色，而不打破图表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！