Google Charts - Изменить цвет столбца в кликабельном ярлыке ColumnChart - PullRequest
Новая
       77

Google Charts - Изменить цвет столбца в кликабельном ярлыке ColumnChart

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

Это jsfiddle пример 

    var chart = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    containerId: 'chart_div',
    dataTable: data,
    options: {
        // setting the "isStacked" option to true fixes the spacing problem
        isStacked: true,
        height: 300,
        width: 600,
        series: [{color: 'blue', visibleInLegend: false}, 
                {color: 'red', visibleInLegend:false}]

    }
});

Как изменить цветовой столбец, когда на интерактивной гистограмме API диаграммы Google отображается кликабельная метка? введите описание изображения здесь Спасибо.

1 Ответ

0 голосов
/ 01 января 2019

Вы можете использовать событие 'click' диаграммы, чтобы определить, был ли выбран ярлык оси.
событие вернет свойство для -> targetId

, если метка оси xпри нажатии кнопки targetID будет иметь следующий формат.

hAxis#[series]label#[row]

например 

hAxis#0label#0

, затем вы можете изменить цвет в зависимости от нажатой метки.
, но вам также нужно будет учитывать последнюю нажатую метку,
кака также любой выбор, сделанный с событием 'select'.

см. Следующий рабочий фрагмент ... 

google.charts.load('current', {
  packages: ['controls', 'corechart']
}).then(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Value');
  data.addRows([
    ['Foo', 94],
    ['Bar', 23],
    ['Baz', 80],
    ['Bat', 47],
    ['Cad', 32],
    ['Qud', 54]
  ]);

  var chart = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    containerId: 'chart_div',
    dataTable: data,
    options: {
      height: 300,
      width: 600,
    }
  });

  google.visualization.events.addOneTimeListener(chart, 'ready', function (props) {
    var currentSelection = null;

    google.visualization.events.addListener(chart.getChart(), 'click', function (props) {
      var target = props.targetID;
      if ((target.indexOf('hAxis#') > -1) && (target.indexOf('label#') > -1)) {
        target = target.split('#');
        setSelection(parseInt(target[target.length - 1]));
      }
    });

    google.visualization.events.addListener(chart, 'select', function () {
      setSelection(getSelection());
    });

    function getSelection() {
      var rowIndex = null;
      var selection = chart.getChart().getSelection();
      if (selection.length > 0) {
        rowIndex = selection[0].row;
      }
      return rowIndex;
    }

    function setSelection(rowSelected) {
      if (rowSelected === currentSelection) {
        currentSelection = null;
      } else {
        currentSelection = rowSelected;
      }
      google.visualization.events.addOneTimeListener(chart, 'ready', function (props) {
        if (currentSelection === null) {
          chart.getChart().setSelection([]);
        } else {
          chart.getChart().setSelection([{row: currentSelection, column: 1}]);
        }
      });
      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1, {
        calc: function (dt, row) {
          return (row === currentSelection) ? '00A0D0' : null;
        },
        role: 'style',
        type: 'string'
      }]);
      chart.setDataTable(view);
      chart.draw();
    }
  });

  chart.draw();
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

NOTES (см. Фрагмент выше)

сначала вы можете использовать роль столбца 'style' для измененияцвет отдельной строки.
это предотвратит необходимость добавления опций для учета дополнительной серии данных.

далее, вы можете использовать addOneTimeEventListener, чтобы вам не пришлось удалять событие позже.

наконец, рекомендуем использовать более новую библиотеку loader.js 

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

вместо jsapi, в соответствии с примечаниями к выпуску ...

Версия Google Charts, которая остается доступной через загрузчик jsapi, больше не обновляется последовательно.Пожалуйста, используйте новый gstatic loader с этого момента.

это только изменит оператор load ...

...