时间戳

首页 > 解决方案 > 将条形图最后一列设置为默认蓝色。注意“通过 API 调用数据”

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

问题描述

条状图

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

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

标签： javascriptchartsbar-chartgoogle-visualization

解决方案

您可以使用'style' 列角色。

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

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

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

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

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

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

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

然后使用视图绘制图表，
请参阅以下工作片段... 

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>

推荐阅读