Google 图表，通过添加 $.each 为每个条形图添加不同的颜色

Question

我有这个 Google 条形图：

function drawChart(result) {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('number', 'Hour');
        data.addColumn({ type: 'string', role: 'style' });
        var dataArray = [];
        **var colorAdd = ['red', 'green', 'blue', 'yellow'];**

        $.each(result, function (i, obj) {
            dataArray.push([obj.Name, obj.TimeHour, **ADD TO THIS**]);
        });
        data.addRows(dataArray);

        var columnChartOptions = {
            title: "All Hour",
            height: 400,
            legend: { position: "none" },
        };

        var columnChart = new google.visualization.ColumnChart(document.getElementById('columnchart_div'));
        columnChart.draw(data, columnChartOptions);
    }

I return 数据从控制器查看并按 $.each

推送到图表

在此代码中，我可以将我想要的名称颜色添加到列颜色中。

但是如果我想添加数组颜色以更改每个条形的颜色我应该使用吗？

我尝试将颜色：[ ] 添加到 columnChartOptions，但只有数组中的第一个颜色添加到图表。

谁能帮忙谢谢

Answer 1

colors 选项应用提供的数组中的每种颜色，
到数据 table.

中的每个 y-axis 列（系列）

如果您只有一个系列，则只会应用一种颜色。

如果颜色数组中有四种颜色，
那么您必须为要应用的每种颜色设置四个 y-axis 列。

var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Hour A');
data.addColumn('number', 'Hour B');
data.addColumn('number', 'Hour C');
data.addColumn('number', 'Hour D');

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  drawChart([{
    Name: 'Category 1',
    TimeHourA: 1,
    TimeHourB: 2,
    TimeHourC: 3,
    TimeHourD: 4
  }, {
    Name: 'Category 2',
    TimeHourA: 2,
    TimeHourB: 4,
    TimeHourC: 6,
    TimeHourD: 8
  }]);
});

function drawChart(result) {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Hour A');
  data.addColumn('number', 'Hour B');
  data.addColumn('number', 'Hour C');
  data.addColumn('number', 'Hour D');
  var dataArray = [];
  var colorAdd = ['red', 'green', 'blue', 'yellow'];

  $.each(result, function (i, obj) {
    dataArray.push([obj.Name, obj.TimeHourA, obj.TimeHourB, obj.TimeHourC, obj.TimeHourD]);
  });
  data.addRows(dataArray);

  var columnChartOptions = {
    colors: colorAdd,
    title: "All Hour",
    height: 400,
    legend: { position: "none" },
  };

  var columnChart = new google.visualization.ColumnChart(document.getElementById('columnchart_div'));
  columnChart.draw(data, columnChartOptions);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_div"></div>

如果数据中只有一个系列 table,
并且您希望为每个条形图涂上不同的颜色，
唯一的选择是使用样式列角色。

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  drawChart([{
    Name: 'A',
    TimeHour: 1
  }, {
    Name: 'B',
    TimeHour: 2
  }, {
    Name: 'C',
    TimeHour: 3
  }, {
    Name: 'D',
    TimeHour: 4
  }]);
});

function drawChart(result) {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Hour');
  data.addColumn({ type: 'string', role: 'style' });
  var dataArray = [];
  var colorAdd = ['red', 'green', 'blue', 'yellow'];

  $.each(result, function (i, obj) {
    dataArray.push([obj.Name, obj.TimeHour, colorAdd[i]]);
  });
  data.addRows(dataArray);

  var columnChartOptions = {
    title: "All Hour",
    height: 400,
    legend: { position: "none" },
  };

  var columnChart = new google.visualization.ColumnChart(document.getElementById('columnchart_div'));
  columnChart.draw(data, columnChartOptions);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_div"></div>

Google 图表，通过添加 $.each 为每个条形图添加不同的颜色

Google Chart, Different color in for each bar by add in $.each

javascript

charts

google-visualization