Как заполнить область в GoogleCharts AreaChart цветом градиента? - PullRequest
Новая
       7

Как заполнить область в GoogleCharts AreaChart цветом градиента?

0 голосов
/ 01 ноября 2018

С моей Google Chart я использую следующие опции: 

chartOptions: {
                hAxis: {
                    title: 'Tasks'
                },
                vAxis: {
                    title: 'Duration'
                },
                animation:{
                    duration: 2000,
                    startup: true
                },
                colors: ['#6f9654']


            }

Как мне изменить цвет области под графиком и как я могу заполнить ее градиентом? (Я не хочу заполнять фон всей диаграммы)

До сих пор я не нашел никаких документов в документации Google. Это вообще возможно? Есть ли хитрость?

ОБНОВЛЕНИЕ : Результат решения @whiteHats с моими адаптациями .: enter image description here

1 Ответ

0 голосов
/ 01 ноября 2018

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

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

<svg style="width:0;height:0;position:absolute;" aria-hidden="true" focusable="false">
  <linearGradient id="my-gradient" x2="1" y2="1">
    <stop offset="0%" stop-color="#447799" />
    <stop offset="50%" stop-color="#224488" />
    <stop offset="100%" stop-color="#112266" />
  </linearGradient>
</svg>

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

var chartOptions = {
  chartArea: {
      backgroundColor: '#447799'
  },
  ...

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

как таковой, мы должны использовать MutationObserver и устанавливать заливку каждый раз, когда svg видоизменяется (рисуется).

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

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var dataTable = new google.visualization.DataTable({
    cols: [
      {label: 'x', type: 'number'},
      {label: 'y', type: 'number'}
    ],
    rows: [
      {c:[{v: 0}, {v: 25}]},
      {c:[{v: 5}, {v: 25}]},
      {c:[{v: 10}, {v: 25}]},
      {c:[{v: 15}, {v: 25}]},
      {c:[{v: 20}, {v: 25}]},
      {c:[{v: 25}, {v: 25}]},
      {c:[{v: 30}, {v: 25}]},
      {c:[{v: 40}, {v: 25}]},
      {c:[{v: 45}, {v: 25}]},
      {c:[{v: 50}, {v: 25}]},
      {c:[{v: 55}, {v: 25}]},
      {c:[{v: 60}, {v: 25}]},
      {c:[{v: 65}, {v: 25}]},
      {c:[{v: 70}, {v: 25}]}
    ]
  });

  var chartOptions = {
    chartArea: {
        backgroundColor: '#447799'
    },
    height: 600,
    hAxis: {
        title: 'Tasks'
    },
    vAxis: {
        title: 'Duration'
    },
    animation:{
        duration: 2000,
        startup: true
    },
    colors: ['#6f9654']
  };

  var container = document.getElementById("chart_div");
  var chart = new google.visualization.AreaChart(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') === '#447799') {
          rect.setAttribute('fill', 'url(#my-gradient) #447799');
        }
      });
    });
    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">
  <linearGradient id="my-gradient" x2="1" y2="1">
    <stop offset="0%" stop-color="#447799" />
    <stop offset="50%" stop-color="#224488" />
    <stop offset="100%" stop-color="#112266" />
  </linearGradient>
</svg>
...