如何在javascript中的其他地方引用控件包装器的值

How to refer to the value of a controlwrapper somewhere else in javascript

本文关键字：引用 控件 包装 方引用 javascript 其他      更新时间：2023-09-26

我有各种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中明确地声明它。它给了我一个不同的长度错误，所以我决定用它作为颜色。

今天晚些时候我有时间的时候会更新的。

相关文章：