javascript - 删除 Google 堆积柱形图之间的水平白线

标签 javascript google-visualization stacked-chart column-chart

如何删除这些堆叠列之间的水平白线?

enter image description here

这是我的代码:

<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">

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

google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Genre', 'One', 'Two'],
        ['2010', 10, 24],
        ['2020', 16, 22]
    ]);

    var options = {
        width: 300,
        height: 200,
        legend: 'none',
        bar: { groupWidth: '100%' },
        isStacked: true,
        series: { 
            0: { color: '#40a1ec' }, 
            1: { color: '#ff8888'} 
        },          
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

    chart.draw(data, options);
}
</script>
</head>

<body>
<div id="chart_div"></div>
</body>
</html>

我知道如何删除条之间的垂直空白(使用 groupWidth),但我找不到删除水平白线的方法。

谢谢!

最佳答案

我认为唯一的方法是添加 CSS style to columns所以中风不为空:

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

google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Genre', 'One', { role: 'style' }, 'Two', { role: 'style' } ],
    ['2010', 10,  'stroke-width: 1;stroke-color: blue;', 24,'stroke-width: 1;stroke-color: red;'],
    ['2020', 16, 'stroke-width: 1;stroke-color: blue;', 22, 'stroke-width: 1;stroke-color: red;']
  ]);
  var options = {
    width: 400,
    height: 400,
    legend: 'none',
    bar: {
      groupWidth: '100%'
    },
    isStacked: true,
    series: {
      0: {color: '#40a1ec'},
      1: {color: '#ff8888'}
    }
  };
  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div id="chart_div">
</div>

关于javascript - 删除 Google 堆积柱形图之间的水平白线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48532597/

相关文章:

google-apps-script - 如何将谷歌可视化图表嵌入电子表格

javascript - 从特定系列 Google Visualization 折线图中删除悬停工具提示

java - 将工具提示添加到带有子类别的 jfreechart 堆叠条形图中

javascript - Angular 项目 - 为什么到处都要建模?

php - 如何在 Facebook 页面选项卡中授权用户?

javascript - 如何将谷歌 Material 折线图的轴起点设置为0

javascript - Plotly.js - 获取堆积条形图中每个 x 的 4 个 y 值

javascript - 如何防止浏览器重复获取相同的href

javascript - lambda javascript 的正确语法