Установите столбец последнего столбца в качестве синего цвета по умолчанию.Примечание «Данные вызываются через API» - PullRequest
Новая
       84

Установите столбец последнего столбца в качестве синего цвета по умолчанию.Примечание «Данные вызываются через API»

0 голосов
/ 14 декабря 2018

Bar Graph

'У меня вопрос об изменении последнего столбца графика на синий.Я хочу изменить 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});
}

1 Ответ

0 голосов
/ 14 декабря 2018

вы можете использовать '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>
...