Используя диаграммы Google (столбцы), можно ли сделать линейный градиент цвета де-бар? - PullRequest
Новая
       22

Используя диаграммы Google (столбцы), можно ли сделать линейный градиент цвета де-бар?

0 голосов
/ 14 марта 2019

Я использую гистограмму, и мне нужно, чтобы столбцы были градиентными, а не сплошными цветами. В коде вы можете видеть, что я добавляю "role: style" и после сплошного цвета, но мне нужно, чтобыиметь линейный градиент. 

function drawChart2() {
    var data = google.visualization.arrayToDataTable([
        ["Element", "Difference", {
            role: "style"
        }],
        ['Mg', 1.2 , "#1aab54"]           
    ]);

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, {
        calc: "stringify",
        sourceColumn: 1,
        type: "string",
        role: "annotation"
    },
    2]);

    var options = {
        title: "",
        legend: {position: 'none'},
        bar: {
            groupWidth: "50%"
        },
        hAxis: {
          viewWindowMode:'explicit',
          viewWindow: {
          max:2,
          min:0.5
          },
          ticks: [{ v: 0.5, f: 'low'}, { v: 1, f: 'middle'}, {v: 1.5, f: 'high'}],
    },
    };
    var chart_area = document.getElementById("barchart_values2");
    var chart = new google.visualization.BarChart(chart_area);
    google.visualization.events.addListener(chart, 'ready', function(){
 chart_area.innerHTML = '<img src="' + chart.getImageURI() + '" class="img-responsive">';
});
    chart.draw(view, options);

}

1 Ответ

0 голосов
/ 15 марта 2019

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

Во-первых, добавьте определение градиента в 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="#5de694" />
    <stop offset="50%" stop-color="#1aab54" />
    <stop offset="100%" stop-color="#0c5228" />
  </linearGradient>
</svg>

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

['Mg', 1.2 , '#1aab54']  // <-- find element by color

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

// create observer
var observer = new MutationObserver(function () {
  var svg = chart_area.getElementsByTagName('svg')[0];
  svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');

  // add gradient
  Array.prototype.forEach.call(chart_area.getElementsByTagName('rect'), function(rect) {
    if (rect.getAttribute('fill') === '#1aab54') {
      rect.setAttribute('fill', 'url(#my-gradient) #1aab54');
    }
  });
});
observer.observe(chart_area, {
  childList: true,
  subtree: true
});

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

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

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Element', 'Difference', {
      role: 'style'
    }],
    ['Mg', 1.2 , '#1aab54']
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    calc: 'stringify',
    sourceColumn: 1,
    type: 'string',
    role: 'annotation'
  }, 2]);

  var options = {
    title: '',
    legend: {position: 'none'},
    bar: {
      groupWidth: '50%'
    },
    hAxis: {
      viewWindowMode:'explicit',
      viewWindow: {
        max:2,
        min:0.5
      },
      ticks: [{ v: 0.5, f: 'low'}, { v: 1, f: 'middle'}, {v: 1.5, f: 'high'}],
    },
  };
  var chart_area = document.getElementById('barchart_values2');
  var chart = new google.visualization.BarChart(chart_area);
  google.visualization.events.addListener(chart, 'ready', function(){

    // create observer
    var observer = new MutationObserver(function () {
      var svg = chart_area.getElementsByTagName('svg')[0];
      svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');

      // add gradient
      Array.prototype.forEach.call(chart_area.getElementsByTagName('rect'), function(rect) {
        if (rect.getAttribute('fill') === '#1aab54') {
          rect.setAttribute('fill', 'url(#my-gradient) #1aab54');
        }
      });

      // create chart image
      var svgContent = new XMLSerializer().serializeToString(svg);
      var domURL = window.URL || window.webkitURL || window;
      var imageURL = domURL.createObjectURL(new Blob([svgContent], {type: 'image/svg+xml'}));
      var image = document.getElementById('image_div').appendChild(new Image());
      image.src = imageURL;
    });
    observer.observe(chart_area, {
      childList: true,
      subtree: true
    });

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

<div id="barchart_values2"></div>
<div id="image_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="#5de694" />
    <stop offset="50%" stop-color="#1aab54" />
    <stop offset="100%" stop-color="#0c5228" />
  </linearGradient>
</svg>
...