google-visualization - 谷歌图表栏内的额外矩形标签

Question

我使用 google-chartAPI 条形图，但是当我点击一个条形图时，白色矩形被添加到条形图上，如图所示。

我在 API 文档中找不到不添加的选项。

感谢 Dr. Molle，我找到了 css 方式的解决方案但最好知道在选项中停止它。

rect[fill-opacity]{ stroke-width:0 !important; }

Googlechart bar

Answer 1

白色矩形是为了在视觉上显示栏已被选中

唯一可以防止这种情况的选项是 --> enableInteractivity: false

请参阅以下工作片段...

google.charts.load('current', {
  callback: function () {
    var container = document.getElementById('chart_div');
    var chart = new google.visualization.BarChart(container);

    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({type: 'string', label: 'Year'});
    dataTable.addColumn({type: 'number', label: 'Category A'});
    dataTable.addColumn({type: 'number', label: 'Category B'});

    dataTable.addRows([
      ['2014', 1000, 2000],
      ['2015', 2000, 4000],
      ['2016', 3000, 6000],
    ]);

    chart.draw(dataTable, {
      enableInteractivity: false,
      height: 600,
      legend: {
        position: 'bottom'
      },
      pointSize: 4,
      tooltip: {
        isHtml: true
      }
    });
  },
  packages: ['corechart']
});

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

如果您想保留一些交互性并且只丢失选择，

您可以使用'select' 事件监听器取消选择

当 'select' 触发时，将一个空数组 ([]) 传递给图表的 setSelection 方法

请参阅以下工作片段...

google.charts.load('current', {
  callback: function () {
    var container = document.getElementById('chart_div');
    var chart = new google.visualization.BarChart(container);

    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({type: 'string', label: 'Year'});
    dataTable.addColumn({type: 'number', label: 'Category A'});
    dataTable.addColumn({type: 'number', label: 'Category B'});

    dataTable.addRows([
      ['2014', 1000, 2000],
      ['2015', 2000, 4000],
      ['2016', 3000, 6000],
    ]);

    // use 'select' listener to disable selection
    google.visualization.events.addListener(chart, 'select', function () {
      chart.setSelection([]);
    });

    chart.draw(dataTable, {
      height: 600,
      legend: {
        position: 'bottom'
      },
      pointSize: 4,
      tooltip: {
        isHtml: true
      }
    });
  },
  packages: ['corechart']
});

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