我有各种controlwrapper下拉菜单。如何将if语句中当前显示在下拉列表中的内容用于其他函数。我想要访问的controlwrapper值:
var GenderPicker = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'control2',
dataTable: columnsTable,
options: {
filterColumnLabel: 'colLabel',
ui: {
label: 'Data Type: ',
allowTyping: false,
allowMultiple: false,
allowNone: false,
selectedValuesLayout: 'belowStacked'
}
},
state: initState
});
注意:这实际上与获取我想要的特定值的常规下拉列表有点不同
在此基础上,是否可以根据此控件包装器的值单独定义多个colorAxis:colors数组。因此,地理图的颜色比例会根据选择的值而变化。这样我就可以用粉色代表雌性,蓝色代表雄性,等等。例如
var color1 = [];
var color2 = [];
function somefunction(){
if (controlwrapper == specific value){
color1 = ['#FFF000', etc]
} else if (controlwrapper == specific value 2){
color2 = ['#FF0000', etc]
...etc
}
}
然后在图表的选项变量中:
colors: color1
我想在这里得到的地理图可能吗?
编辑:我已经能够根据下拉列表的值在数组中获得我想要的颜色。这些被分配给一个变量,我希望它能在colors:option中使用。使用的代码:
var color1;
if (state.selectedValues.toString() == "Value1"){
color1 = ['#000000','#00FF00','#FF0000','#0000FF']
} else if (state.selectedValues.toString() == "Value2"){
color1 = ['#FFFFFF','#00FF00','#FF0000','#000000']
}
我通过反复试验解决了这个问题。这绝不是最有效的方法,但相当容易理解和调试。
首先,我必须弄清楚更改(按下下拉菜单)发生在哪里,由于其他状态更改侦听器,这相当简单。
function setChartView() {
var state = GenderPicker.getState();
if (state.selectedValues.toString() == "Total Youth Unemployment Rate"){
color1.splice(0,4)
value1.splice(0,4)
color1.push('#444444','#EEFFC8','#71A400','#3B5600')
value1.push(0,0.00001,30, 70)
} else if (state.selectedValues.toString() == "Male Youth Unemployment Rate"){
color1.splice(0,4)
value1.splice(0,4)
color1.push('#444444','#C8EEFF','#0071A4','#003B56')
value1.push(0,0.00001,30, 70)
} else if (state.selectedValues.toString() == "Female Youth Unemployment Rate"){
color1.splice(0,4)
value1.splice(0,4)
color1.push('#444444','#FFC8EE','#A40071','#56003B')
value1.push(0,0.00001,30, 70)
}
geoChart.setView(view);
geoChart.draw();
}
然后,我简单地创建了3个if-then-elseif
语句,它们查询当前状态的selectedValues
以获取指定的字符串。这是针对我的每个"下拉选项"。我想,对于更简单的代码,可以在这里实现一个循环,但我还没有考虑到这一点
为了得到我想要的颜色,需要一些数组操作。过程如下:
color1.splice(0,4) //This removes any items in the color1 array that were already present.
value1.splice(0,4) //This removes any items in the value1 array that were already present.
color1.push('#444444','#EEFFC8','#71A400','#3B5600') //This adds the new colours to now blank color1 array.
value1.push(0,0.00001,30, 70) //This adds the values to the now blank value1 array.
如果不使用splice()
,则数组将变得更大,因为push()
附加而不是替换。为了保持一致性,需要使用splice()
。
这些数组是在图表选项之前定义的。
var color1 = [];
var value1 = [];
并且在图表选项中指定了colorAxis
中的上述变量。
var options1 = {
title: 'A',
displayMode: 'regions',
datalessRegionColor: 'C0C0C0',
colorAxis: {
values: value1,
colors: color1
}
};
我不明白为什么每次都要指定一个值数组,因为它们在整个过程中都是相同的,而不是只在colorAxis中明确地声明它。它给了我一个不同的长度错误,所以我决定用它作为颜色。
今天晚些时候我有时间的时候会更新的。