如何删除堆积列谷歌图表中的白色边框?

时间:2017-02-07 09:19:46

标签: javascript html5 css3 google-visualization google-chartwrapper

我想删除堆积列谷歌图表中的白色边框。 有人能帮助我吗?

这就是我的意思:my current chart

1 个答案:

答案 0 :(得分:0)

使用'style' column role 删除白色边框

实际删除,你可以使用......

stroke-width: 0;

stroke-color: transparent;

但这将允许背景颜色显示,
并且在白色背景上看起来会看起来一样

相反,建议使用与每个系列

相同的stroke-color

请参阅以下工作代码段,DataView用于添加两个'style'



google.charts.load('current', {
  callback: drawChart,
  packages:['corechart']
});

function drawChart() {
  var seriesColors = ['#0097A7', '#26C6DA'];

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'x');
  data.addColumn('number', 'y1');
  data.addColumn('number', 'y2');
  data.addRows([
      ['Jan', 10500000, 1500000],
      ['Feb', 4500000, 400000],
      ['Mar', 7000000,800000],
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
      type: 'string',
      role: 'style',
      calc: function (dt, row) {
        return 'stroke-color: ' + seriesColors[0];
      }
    }, 2, {
      type: 'string',
      role: 'style',
      calc: function (dt, row) {
        return 'stroke-color: ' + seriesColors[1];
      }
    }
  ]);

  var options = {
    colors: seriesColors,
    height: 400,
    isStacked: true,
    legend: 'none',
    width: 400
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.ColumnChart(container);
  chart.draw(view, options);
};

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
&#13;
&#13;
&#13;