Как изменить цвет метки в - Donutchart Google API - PullRequest
Новая
       15

Как изменить цвет метки в - Donutchart Google API

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

enter image description here Как вы можете видеть изображение, я просто хочу изменить цвет 12,5 (как зеленый) и 25 (как красный) в соответствии с цветом дуги пончик в диаграммах Google

Код: - 

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

var observer = new MutationObserver(function () {
  $.each($('#chart_div path[stroke="#636363"]'), function (index, path) {
    $(path).attr('stroke', '#000');
  });

  $.each($('#chart_div text[fill="#9e9e9e"]'), function (index, label) {
     $(label).attr('fill', 'yellow');
  });
var options = {
      width: '360',
      height: '200',
      chartArea: {
          height: "94%",
          width: "94%"
      },
      colors: ['#e0440e', 'green', 'red', '#f3b49f', '#f6c7b6'],
      title: 'My Daily Activities',

      pieHole: 0.6,
      legend: {
          position: 'labeled',
          labeledValueText:'value',
          textStyle: {
            color: 'yellow',
          }
      },
      pieSliceText: 'none',

    };

1 Ответ

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

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

опция legend.textStyle изменит цвет все метки строк,
только не строки суммы.
который в настоящее время используется ... 

  legend: {
      textStyle: {
        color: 'yellow',
      }
  },

Чтобы покрасить каждую этикетку отдельно, сначала удалите вышеуказанную опцию.
тогда мы можем использовать цвета по умолчанию, чтобы определить, является ли текст ...
метка строки (#222222)
или сумма строки (#9e9e9e)

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

        // determine data column index based on default color
        var colIndex = 0;  // row label
        if (label.getAttribute('fill') === '#9e9e9e') {
          colIndex = 1;    // row amount
        }

        // determine row index label represents
        var rowIndex = data.getFilteredRows([{
          column: colIndex,
          test: function (value) {
            switch (colIndex) {
              case 0:
                // check row label
                return (value.indexOf(label.textContent) > -1);
                break;

              case 1:
                // check row amount
                return (value === parseFloat(label.textContent));
                break;
            }
          }
        }]);

        // change color based on row index using colors in chart options
        if (rowIndex.length > 0) {
          label.setAttribute('fill', options.colors[rowIndex[0]]);
        }

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

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var container = document.getElementById('chart_div');
  var chart = new google.visualization.PieChart(container);

  var options = {
    width: 360,
    height: 200,
    chartArea: {
      height: "94%",
      width: "94%"
    },
    colors: ['#e0440e', 'green', 'red', '#f3b49f', '#f6c7b6'],
    title: 'My Daily Activities',
    pieHole: 0.6,
    legend: {
      position: 'labeled',
      labeledValueText:'value'
    },
    pieSliceText: 'none',
  };

  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours'],
    ['Moving to a new city', 25],
    ['Meeting new people', 12.5]
  ]);

  google.visualization.events.addListener(chart, 'ready', function () {
    // change label colors
    var observer = new MutationObserver(function () {
      // loop chart labels
      Array.prototype.forEach.call(container.getElementsByTagName('text'), function(label) {
        // determine data column index based on default color
        var colIndex = 0;  // row label
        if (label.getAttribute('fill') === '#9e9e9e') {
          colIndex = 1;    // row amount
        }

        // determine row index label represents
        var rowIndex = data.getFilteredRows([{
          column: colIndex,
          test: function (value) {
            switch (colIndex) {
              case 0:
                // check row label
                return (value.indexOf(label.textContent) > -1);
                break;

              case 1:
                // check row amount
                return (value === parseFloat(label.textContent));
                break;
            }
          }
        }]);

        // change color based on row index using colors in chart options
        if (rowIndex.length > 0) {
          label.setAttribute('fill', options.colors[rowIndex[0]]);
        }
      });
    });
    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>
...