Возможно ли получить затенение / шаблон в гугл-чарте? - PullRequest
Новая
       3

Возможно ли получить затенение / шаблон в гугл-чарте?

0 голосов
/ 08 января 2020

Можно ли получить затененный шаблон или аналогичный шаблон, как показано ниже средней полосы, при использовании гистограммы Google (и столбчатой ​​диаграммы)? text

Ответы [ 2 ]

1 голос
/ 08 января 2020

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

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

сначала добавьте определение шаблона в html где-то.
этот элемент не должен быть скрыт с помощью display: none,
, в противном случае некоторые браузеры могут его игнорировать.
установка размера в ноль пикселей, кажется, работает. 

<svg style="width:0;height:0;position:absolute;" aria-hidden="true" focusable="false">
  <pattern id="pattern-fill" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(30)">
     <rect x="0" y="0" width="4" height="8" style="stroke: none; fill: #29B6F6;" />
  </pattern>
</svg>

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

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

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

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var dataTable = new google.visualization.DataTable({
    cols: [
      {label: 'x', type: 'string'},
      {label: 'y0', type: 'number'},
      {label: 'y1', type: 'number'},
      {label: 'y2', type: 'number'}
    ],
    rows: [
      {c:[{v: '2014'}, {v: 8}, {v: 20}, {v: 12}]},
      {c:[{v: '2015'}, {v: 20}, {v: 50}, {v: 15}]},
      {c:[{v: '2016'}, {v: 100}, {v: 12}, {v: 50}]},
      {c:[{v: '2017'}, {v: 75}, {v: 18}, {v: 45}]}
    ]
  });

  var chartOptions = {
    height: 600,
    colors: ['#0288d1', '#29b6f6', '#b3e5fc']
  };

  var container = document.getElementById("chart_div");
  var chart = new google.visualization.ColumnChart(container);

  google.visualization.events.addListener(chart, 'ready', function () {
    var observer = new MutationObserver(function () {
      container.getElementsByTagName('svg')[0].setAttribute('xmlns', 'http://www.w3.org/2000/svg');
      Array.prototype.forEach.call(container.getElementsByTagName('rect'), function(rect) {
        if (rect.getAttribute('fill') === '#29b6f6') {
          rect.setAttribute('fill', 'url(#pattern-fill) #29b6f6');
        }
      });
    });
    observer.observe(container, {
      childList: true,
      subtree: true
    });
  });

  chart.draw(dataTable, chartOptions);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<svg style="width:0;height:0;position:absolute;" aria-hidden="true" focusable="false">
  <pattern id="pattern-fill" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(30)">
     <rect x="0" y="0" width="4" height="8" style="stroke: none; fill: #29B6F6;" />
  </pattern>
</svg>
0 голосов
/ 08 января 2020

Установите Роли для определенности как: -

this.myRoles.push({ role: 'certainty', type: 'boolean', index: i });

и установив значение на false, добился цели.

Но я не могу изменить шаблон от затенения. Буду признателен за любую помощь, которую я могу получить с этим.

...