如何在柱形图中添加不同的颜色 [英] How can I add different colors to bar in Column chart

问题描述

如何在柱状图中为条添加不同的颜色。在选项中添加颜色字段不起作用。请帮助。

以下是代码段：

  tdata。 addRow（[col1，arr [0] .Manual]）
 tdata.addRow（[col2，arr [0] .Auto]）; 
 tdata.addRow（[col3，arr [0] .Amount]）; 
 
 options = {
 fontSize：12，
 height：430，
 width：380，
 chartArea：{left：25％，top ：20％，右：5％，底部：10％}，
 backgroundColor：'＃f5f5f5'，
标题：'Project'，
 pieSliceText：'value '，
颜色：['red'，'green'，'blue']，
'is3D'：true 
}; 
 var chart = new google.visualization.ColumnChart（document.getElementById（'drilldown_div'））; 
 chart.draw（tdata，options）; 
返回false; 
  

解决方案

颜色选项将颜色应用到每个系列

，所以如果您有3种颜色

，则需要3个y轴列

如下...

google.charts.load（'当前'，{packages：['corechart']}）。然后（function（）{var data = google.visualization.arrayToDataTable（[['x'，'y0'，'y1'，'y2']，[' A'，100,120,130]]）; var chart = new google.visualization.ColumnChart（document.getElementById（'chart_div'））; chart.draw（data，{colors：['red'，'green'， 'blue']}）;}）;

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

$ hr
>< / div>

为一系列中的单个列着色，

使用'style'列角色

如下...

注意：使用'style'列角色将会使图例无效

  google.charts.load（'current'，{packages ：['corechart']}）。then（function（）{var data = google.visualization.arrayToDataTable（[['x'，'y'，{role：'style'，type：'string'}]，[ 'A'，100，'red']，['B'，120，'green']，['C'，130，'blue']]）; var chart = new google.visualization.ColumnChart（document.getElementById（'chart_div'））; chart.draw（data，{legend：'none'}）;}）;  

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

How can i add different colors to Bars in Column chart. Adding colors field in option is not working. Please help.

Below is the code snippet:

tdata.addRow([col1, arr[0].Manual])
        tdata.addRow([col2, arr[0].Auto]);
        tdata.addRow([col3, arr[0].Amount]);

        options = {
            fontSize: 12,
            height: 430,
            width: 380,
            chartArea: { left: "25%", top: "20%", right: "5%", bottom: "10%" },
            backgroundColor: '#f5f5f5',
            title: 'Project',
            pieSliceText: 'value',
            colors: ['red', 'green', 'blue'],
            'is3D': true
        };
        var chart = new google.visualization.ColumnChart(document.getElementById('drilldown_div'));
        chart.draw(tdata, options);
        return false;

解决方案

the colors option applies colors to each series
so if you have 3 colors
you would need 3 y-axis columns

as follows...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y0', 'y1', 'y2'],
    ['A', 100, 120, 130]
  ]);

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, {
    colors: ['red', 'green', 'blue']
  });
});

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

---

to color individual columns within a series,
use a 'style' column role

as follows...

note: using a 'style' column role will invalidate the legend

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y', {role: 'style', type: 'string'}],
    ['A', 100, 'red'],
    ['B', 120, 'green'],
    ['C', 130, 'blue']
  ]);

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, {
    legend: 'none'
  });
});

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

这篇关于如何在柱形图中添加不同的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！