Google 图表 API 根据控件选择更改颜色
Google Charts API change color based on control selection
>我有一个谷歌图表,我正在尝试根据类别控件更改颜色。
我的图表是一个直方图,它应该根据编程下拉列表中的选择改变颜色。 我的部分代码如下所示:
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
解决了!!为此,我必须在代码中添加事件侦听器和函数。 见下文。
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();
}
相关文章:
- 每个选择器的Jquery css颜色都在变化,但字体大小却没有变化
- Javascript对象类在单击时打开窗口进行颜色选择,并在更改时替换对象背景颜色
- DT数据表背景颜色为黑色,但仍有悬停和选择颜色
- 通过Ember颜色选择器更新SCSS变量
- 如何动态创建许多Jquery颜色选择器(eyecon)
- 选择字段-更改popover颜色
- Javascript没有从数组中选择背景颜色
- HighCharts:3D柱形图在选择时更改边框颜色
- 每次单击按钮时随机选择颜色
- 使用 Javascript 选择颜色值
- 在Wordpress中随机选择颜色
- 单击该选项后更改滑块以选择颜色
- HTML Imagemap与PHP和Javascript /用户可以选择颜色
- 使用onchange事件获取选择颜色列表的值,以便更改图片
- 获取当前浏览器中的文本选择颜色和背景颜色
- 如何在量角器的颜色选择器窗口中选择颜色
- 使用javascript从HTML中线性渐变提供的范围中选择颜色
- AngularJs -使用$parent ng-model从控制器更改/推送选择颜色
- 用dat设置三个js中的一个对象的颜色.GUI选择颜色
- Javascript画布绘图应用程序选择颜色