将条形图最后一列设置为默认蓝色。注意“通过 API 调用数据”

Question

'我的问题是将图表的最后一列更改为蓝色。我想要做的是将 18Dec Bar 更改为 蓝色。提前致谢'

    google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
type: 'GET',
        url: "{{ url('/dateusersbarchartdata') }}/" + period,
        dataType: "json",
        global: false,
        async: false,
        success: function (jsondata) {

        }
}).responseText;
var array = $.parseJSON(jsonData);
var data = google.visualization.arrayToDataTable(array);
var chart = new google.visualization.BarChart(document.getElementById('container- 
user'));
var colors = ['#B0C4DE', '#1E90FF'];
var options = {
orientation: 'horizontal',
        backgroundColor: {fill: 'transparent'},
        chartArea: {'width': '100%', 'height': '80%'},

        series: {0: {color: '#B0C4DE'}},

        };
   chart.draw(data, options, {colors: colors});
}

Answer 1

您可以使用'style' column role。

这将允许您更改各个条形的颜色。

在数据表中，为列标题添加一个对象。

['x', 'y0', {role: 'style', type: 'string'}],  // <-- column role

然后在数据行中，为条形添加颜色。

['18Sep', 600, '#B0C4DE'],
['18Dec', 1500, '#1E90FF']  // <-- last bar

请参阅以下工作 sn-p...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y0', {role: 'style', type: 'string'}],
    ['17Jun', 1000, '#B0C4DE'],
    ['17Sep', 500, '#B0C4DE'],
    ['17Dec', 1000, '#B0C4DE'],
    ['18Mar', 750, '#B0C4DE'],
    ['18Jun', 1200, '#B0C4DE'],
    ['18Sep', 600, '#B0C4DE'],
    ['18Dec', 1500, '#1E90FF']
  ]);

  var chart = new google.visualization.BarChart(document.getElementById('container-user'));
  var options = {
    orientation: 'horizontal',
    backgroundColor: {fill: 'transparent'},
    chartArea: {'width': '100%', 'height': '80%'}
  };
  chart.draw(data, options);
});

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

注意：颜色和系列选项映射到数据表中的每个 y 轴列。
因此，如果您只有一个 y 轴列，如上例所示，
那么你只有一组数据。
这就是为什么您必须使用'style' 列角色的原因。

编辑

您可以使用数据视图来设置样式列的值，
加载数据后。

这可以通过添加计算列来完成，
返回最后一行/栏的颜色。

var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
  calc: function (dt, row) {
    // return color for last row
    if (row === (dt.getNumberOfRows() - 1)) {
      return '#1E90FF';
    }
    return null;
  },
  role: 'style',
  type: 'string'
}]);

然后使用视图绘制图表，
请参阅以下工作 sn-p...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y0'],
    ['17Jun', 1000],
    ['17Sep', 500],
    ['17Dec', 1000],
    ['18Mar', 750],
    ['18Jun', 1200],
    ['18Sep', 600,],
    ['18Dec', 1500,]
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    calc: function (dt, row) {
      // return color for last row
      if (row === (dt.getNumberOfRows() - 1)) {
        return '#1E90FF';
      }
      return null;
    },
    role: 'style',
    type: 'string'
  }]);

  var chart = new google.visualization.BarChart(document.getElementById('container-user'));
  var options = {
    colors: ['#B0C4DE'],
    orientation: 'horizontal',
    backgroundColor: {fill: 'transparent'},
    chartArea: {'width': '100%', 'height': '80%'}
  };
  chart.draw(view, options);
});

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