Google Charts API 根据控件选择更改颜色答案

【问题标题】：Google Charts API change color based on control selectionGoogle Charts API 根据控件选择更改颜色
【发布时间】：2016-01-26 15:51:26
【问题描述】：

我有一个谷歌图表，我正在尝试根据类别控件更改颜色。

我的图表是一个直方图，它应该根据 programmaticDropdown 中的选择改变颜色。我的部分代码如下所示：

    var dashboard = new google.visualization.Dashboard(
      document.getElementById('programmatic_dashboard_div'));


    programmaticDropdown = new google.visualization.ControlWrapper({
      'controlType': 'CategoryFilter',
      'containerId': 'programmatic_control_div',
      'options': {
        'filterColumnLabel': 'Type',
        'ui': {'allowMultiple': false},
      }
    });

   programmaticChart  = new google.visualization.ChartWrapper({
    'chartType': 'Histogram',
    'containerId': 'programmatic_chart_div',
    'options': {
      'title': 'Issues by Month',
      'legend': 'none',
      'height':400,
      'hAxis': { 
          'viewWindowMode':'explicit',
          'viewWindow':{
            'max':13,
            'min':0
          }
        }
    },
     'view': { 'columns': [0, 1] }
  });




  dashboard.bind(programmaticDropdown, programmaticChart);
  dashboard.draw(data);
}

另外，这里有一个指向谷歌图表控件文档的链接，其中包含一些 UI 信息......有人可以帮忙吗？

谢谢！！！

https://developers.google.com/chart/interactive/docs/gallery/controls?hl=en#controls-gallery

【问题讨论】：

标签： javascript google-visualization

【解决方案1】：

解决了！！！为此，我必须在我的代码中添加一个事件侦听器和函数。见下文。

google.visualization.events.addListener(programmaticDropdown, 'statechange', changeTitle);

function changeTitle () {
    var location = programmaticDropdown.getState().selectedValues[0];
    if (location == "CLOSED") {
        programmaticChart.setOption('colors', ['#e7711c']);
    } else if (location == "OPEN") {
        programmaticChart.setOption('colors', ['#ff0000']);
    }

    programmaticChart.draw();
}

【讨论】：