谷歌在栏内绘制额外的矩形标签答案

【问题标题】：Google charts extra rect tag inside bar谷歌在栏内绘制额外的矩形标签
【发布时间】：2016-09-21 10:19:04
【问题描述】：

我使用google-chartAPI 条形样式，但是当我单击条形时，如图所示，白色矩形会添加到条形中。

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

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

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

Googlechart bar

【问题讨论】：

标签： google-visualization bar-chart

【解决方案1】：

白色矩形是为了直观地显示该条已被选中

防止这种情况发生的唯一选择是 --> enableInteractivity: false

请参阅以下工作 sn-p...

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 方法

请参阅以下工作 sn-p...

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>

【讨论】：