Изменение цвета отдельного элемента данных в гистограмме Google Charts - PullRequest
Новая
       16

Изменение цвета отдельного элемента данных в гистограмме Google Charts

0 голосов
/ 04 июля 2018

Я экспериментирую с кодом, найденным на сайте Google Chart , с дополнительной опцией установки сегментов для представления 10% -ного процентиля каждый: 

var options = {
  title: 'Lengths of dinosaurs, in meters',
  legend: { position: 'none' },
  histogram: { bucketSize: rawData.length / 10}
};

Однако, не смотря на документацию, я не могу найти способ изменить цвет одной точки данных, чтобы график был похож на это:

enter image description here

Существует ли обходной путь, использующий открытые методы Javascript и / или Google Charts, для достижения этой цели?

Вставьте ссылку на мой код (с изменениями, описанными выше): https://pastebin.com/NeGnEwKY

1 Ответ

0 голосов
/ 05 июля 2018

нет никаких стандартных опций, которые вы можете использовать для изменения цвета определенного блока

но вы можете изменить цвет вручную

график будет рисовать блоки в порядке значения ('Length')

сначала отсортируйте данные по значению 

// sort data by 'Length'
var data = google.visualization.arrayToDataTable(rawData);
data.sort([{column: 1}]);

теперь таблица данных будет в том же порядке, что и элементы <rect>, используемые для построения графика

мы можем использовать getFilteredRows, чтобы установить подсвечивание индексов строк 

// find data row to highlight
var highlightRows = data.getFilteredRows([{
  column: 0,
  value: 'Ultrasaurus (ultra lizard)'
}]);

далее мы можем использовать опцию colors для идентификации элементов блока (<rect>)
затем измените свойство 'fill'

но мы должны использовать MutationObserver, потому что диаграмма вернется к исходному цвету,
в любое время, например, при наведении курсора или выберите ...

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

google.charts.load('current', {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var rawData = [
    ['Dinosaur', 'Length'],
    ['Acrocanthosaurus (top-spined lizard)', 12.2],
    ['Albertosaurus (Alberta lizard)', 9.1],
    ['Allosaurus (other lizard)', 12.2],
    ['Apatosaurus (deceptive lizard)', 22.9],
    ['Archaeopteryx (ancient wing)', 0.9],
    ['Argentinosaurus (Argentina lizard)', 36.6],
    ['Baryonyx (heavy claws)', 9.1],
    ['Brachiosaurus (arm lizard)', 30.5],
    ['Ceratosaurus (horned lizard)', 6.1],
    ['Coelophysis (hollow form)', 2.7],
    ['Compsognathus (elegant jaw)', 0.9],
    ['Deinonychus (terrible claw)', 2.7],
    ['Diplodocus (double beam)', 27.1],
    ['Dromicelomimus (emu mimic)', 3.4],
    ['Gallimimus (fowl mimic)', 5.5],
    ['Mamenchisaurus (Mamenchi lizard)', 21.0],
    ['Megalosaurus (big lizard)', 7.9],
    ['Microvenator (small hunter)', 1.2],
    ['Ornithomimus (bird mimic)', 4.6],
    ['Oviraptor (egg robber)', 1.5],
    ['Plateosaurus (flat lizard)', 7.9],
    ['Sauronithoides (narrow-clawed lizard)', 2.0],
    ['Seismosaurus (tremor lizard)', 45.7],
    ['Spinosaurus (spiny lizard)', 12.2],
    ['Supersaurus (super lizard)', 30.5],
    ['Tyrannosaurus (tyrant lizard)', 15.2],
    ['Ultrasaurus (ultra lizard)', 30.5],
    ['Velociraptor (swift robber)', 1.8]
  ];

  // sort data by 'Length'
  var data = google.visualization.arrayToDataTable(rawData);
  data.sort([{column: 1}]);

  // find data row to highlight
  var highlightRows = data.getFilteredRows([{
    column: 0,
    value: 'Ultrasaurus (ultra lizard)'
  }]);

  var options = {
    colors: ['#3366cc', '#dc3912'],  // <-- 1st color used to identify, 2nd to highlight
    title: 'Lengths of dinosaurs, in meters',
    legend: { position: 'none' },
    histogram: { bucketSize: rawData.length / 10}
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.Histogram(container);

  google.visualization.events.addListener(chart, 'ready', function () {
    var observer = new MutationObserver(function () {
      var index = 0;
      Array.prototype.forEach.call(container.getElementsByTagName('rect'), function (rect) {
        if (options.colors.indexOf(rect.getAttribute('fill')) > -1) {
          if (highlightRows.indexOf(index) > -1) {
            rect.setAttribute('fill', options.colors[1]);
          }
          index++;
        }
      });
    });
    observer.observe(container, {
      childList: true,
      subtree: true
    });
  });

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