时间戳

首页 > 解决方案 > 使用谷歌图表（条形图），我可以制作 de bar 颜色线性渐变吗？

charts - 使用谷歌图表（条形图），我可以制作 de bar 颜色线性渐变吗？

问题描述

我正在使用条形图，我需要条形是渐变而不是纯色。在代码中，您可以看到我在纯色之后添加了“角色：样式”，但我需要有一个线性渐变。

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

}

标签： chartsgoogle-visualizationbar-chart

解决方案

没有渐变填充选项，
但您可以添加自己的...

首先，将渐变定义添加到 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'事件上设置渐变填充，
但我们必须使用 a 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>

推荐阅读