使用Google图表（条形图），我可以使条形图颜色线性渐变吗？

问题描述

我使用的是条形图，我需要条形为渐变色，而不是单色的
色。在代码中，您可以看到我在纯色之后添加了 role：style，但是我需要具有线性梯度。

I'm using a bar chart and I need that the bars to be gradient rather than solidcolors.In the code, you can see that I add "role: style" and after a solid color, but I need that the to have a linear gradient.

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);

}

推荐答案

没有用于渐变填充的选项，

，但是您可以添加自己的...

no options for gradient fill,
but you can add your own...

首先，将渐变定义添加到

此元素不应使用 display隐藏：无，

否则，某些浏览器可能会忽略它。 br>
将尺寸设置为零像素似乎可行。

first, add your gradient definition to the html somewhere.
this element should not be hidden with display: none,
otherwise, some browsers may ignore it.
setting the size to zero pixels seems to work.

<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> 元素用于条形。

我们可以使用颜色样式。

next, we need to be able to identify the <rect> element used for the bar.
we can use the color style.

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

找到< rect> 元素并设置fill属性。

通常，我们可以在图表的就绪 事件中设置渐变填充，

，但是我们必须使用 MutationObserver ，并在每次svg发生变化（绘制/悬停）时设置填充。

find the <rect> element and set the fill attribute.
normally, we could set the gradient fill on the chart's 'ready' event,
but we have to use a MutationObserver, and set the fill every time the svg is mutated (drawn / hovered).

// 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可以一份更好的工作。

however, I was not able to get the gradient to come thru in the image, maybe html2canvas will do a better job.

请参阅以下工作摘要...

see following working snippet...

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>

这篇关于使用Google图表（条形图），我可以使条形图颜色线性渐变吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！