Настройте цвета галочек HAxis в гистограммах Google - PullRequest
0 голосов
/ 03 июля 2018

Можно ли изменить цвет галочек на панели xAxis?

See this image

Я хочу сделать галочки из 2000 зеленых, 2500 оранжевых и 3000 красных.

Я пробовал это, но, похоже, это не работает:

ticks: [500, 1000, 1500, {v: 2000, color: "Green"}, {v: 2500, color: "Orange"}, {v: 3000, color: "Red"}]

ticks: [500, 1000, 1500, [2000, "Green"], [2500, "Orange"], [3000, "Red"]]

Любая помощь приветствуется, спасибо!

1 Ответ

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

нет настроек конфигурации для изменения цвета отдельных галочек

, но вы можете изменить вручную, на событии 'ready' графика,
см. следующий рабочий фрагмент ...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.arrayToDataTable([
    ['Category', 'value'],
    ['a', 2924],
    ['b', 2075],
    ['c', 2516],
    ['d', 2153],
    ['e', 2348],
    ['f', 1925]
  ]);

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

  google.visualization.events.addListener(chart, 'ready', changeTickColors);

  chart.draw(data, {
    legend: {
      alignment: 'end',
      position: 'top'
    },
    hAxis: {
      ticks: [500, 1000, 1500, 2000, 2500, 3000]
    }
  });

  function changeTickColors() {
    var tickColors = {
      "2,000": "green",
      "2,500": "orange",
      "3,000": "red"
    };

    Array.prototype.forEach.call(container.getElementsByTagName('text'), function(label) {
      if (label.getAttribute('text-anchor') === 'middle') {
        if (tickColors.hasOwnProperty(label.textContent)) {
          label.setAttribute('fill', tickColors[label.textContent]);
        }
      }
    });
  }
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...