Question

这是jsfiddle的示例

    var chart = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    containerId: 'chart_div',
    dataTable: data,
    options: {
        // setting the "isStacked" option to true fixes the spacing problem
        isStacked: true,
        height: 300,
        width: 600,
        series: [{color: 'blue', visibleInLegend: false}, 
                {color: 'red', visibleInLegend:false}]

    }
});

当Google Chart API条形图上的可点击标签时，如何更改颜色列？ enter image description here 谢谢。

Answer 1

您可以使用图表的'click'事件来确定是否单击了轴标签。
该事件将返回-> targetId

的属性

如果单击了x轴标签，则targetID将具有以下格式。

hAxis#[series]label#[row]

例如

hAxis#0label#0

然后您可以根据所单击的标签更改颜色。
但您还需要考虑点击的最后一个标签，
以及通过'select'事件进行的所有选择。

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

google.charts.load('current', {
  packages: ['controls', 'corechart']
}).then(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Value');
  data.addRows([
    ['Foo', 94],
    ['Bar', 23],
    ['Baz', 80],
    ['Bat', 47],
    ['Cad', 32],
    ['Qud', 54]
  ]);

  var chart = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    containerId: 'chart_div',
    dataTable: data,
    options: {
      height: 300,
      width: 600,
    }
  });

  google.visualization.events.addOneTimeListener(chart, 'ready', function (props) {
    var currentSelection = null;

    google.visualization.events.addListener(chart.getChart(), 'click', function (props) {
      var target = props.targetID;
      if ((target.indexOf('hAxis#') > -1) && (target.indexOf('label#') > -1)) {
        target = target.split('#');
        setSelection(parseInt(target[target.length - 1]));
      }
    });

    google.visualization.events.addListener(chart, 'select', function () {
      setSelection(getSelection());
    });

    function getSelection() {
      var rowIndex = null;
      var selection = chart.getChart().getSelection();
      if (selection.length > 0) {
        rowIndex = selection[0].row;
      }
      return rowIndex;
    }

    function setSelection(rowSelected) {
      if (rowSelected === currentSelection) {
        currentSelection = null;
      } else {
        currentSelection = rowSelected;
      }
      google.visualization.events.addOneTimeListener(chart, 'ready', function (props) {
        if (currentSelection === null) {
          chart.getChart().setSelection([]);
        } else {
          chart.getChart().setSelection([{row: currentSelection, column: 1}]);
        }
      });
      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1, {
        calc: function (dt, row) {
          return (row === currentSelection) ? '00A0D0' : null;
        },
        role: 'style',
        type: 'string'
      }]);
      chart.setDataTable(view);
      chart.draw();
    }
  });

  chart.draw();
}

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

注释（请参见上面的片段）

首先，您可以使用'style'列角色来更改单个行的颜色。
这样可以避免添加选项以说明其他一系列数据。

接下来，您可以使用addOneTimeEventListener，因此您以后不必删除该事件。

最后，建议使用较新的库loader.js

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

根据{{3}} ...

，

而不是jsapi

通过jsapi加载程序仍然可用的Google Charts版本不再被一致更新。从现在开始，请使用新的静态加载器。

这只会更改load语句...

Google图表-更改可点击标签ColumnChart中列的颜色

1 个答案: