多个字符串和数字范围过滤器 - 谷歌可视化

Question

我希望在我的数据库中包含多个字符串和数字范围过滤器。现在只让其中一个放在其中，我无法弄清楚原因。

以下是我正在使用的当前代码。

HTML：

<div id="dashboard">
    <div id="string_filter_div"></div>
    <div id="position"></div>
    <div id="numnber_range_filter_div"></div>
    <div id="height"></div>
    <div id="table_div"></div>
</div>

JavaScript的：

function drawTable() {
    var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
    data.addColumn('string', 'Team');
    data.addColumn('string', 'Nationality');
    data.addColumn('number', 'Height');
    data.addColumn('number', 'Weight');
    data.addColumn('number', 'Age');
    data.addColumn('string', 'Foot');
    data.addColumn('string', 'Position');
    data.addColumn('number', 'Overall Rating');
    data.addColumn('number', 'Attack');
    data.addColumn('number', 'Defense');
    data.addColumn('number', 'Header Accuracy');
    data.addColumn('number', 'Dribble Accuracy');
    data.addColumn('number', 'Short Pass Accuracy');
    data.addColumn('number', 'Short Pass Speed');
    data.addColumn('number', 'Long Pass Accuracy');
    data.addColumn('number', 'Long Pass Speed');
    data.addColumn('number', 'Shot Accuracy');
    data.addColumn('number', 'Place Kicking');
    data.addColumn('number', 'Swerve');
    data.addColumn('number', 'Ball Control');
    data.addColumn('number', 'Weak Foot Accuracy');
    data.addColumn('number', 'Weak Foot Usage');
    data.addColumn('number', 'Goal Keeping');
    data.addColumn('number', 'Responsiveness');
    data.addColumn('number', 'Explosive Power');
    data.addColumn('number', 'Dribble Speed');
    data.addColumn('number', 'Top Speed');
    data.addColumn('number', 'Body Balance');
    data.addColumn('number', 'Stamina');
    data.addColumn('number', 'Kicking Power');
    data.addColumn('number', 'Jump');
    data.addColumn('number', 'Injury');
    data.addColumn('number', 'Attack 2');
    data.addColumn('number', 'Defence 2');
    data.addColumn('number', 'Form');
    data.addColumn('number', 'Tenacity');
    data.addColumn('number', 'Teamwork');
    data.addColumn('number', 'Owners');
    data.addColumn('number', 'Price');
    data.addRows([
        ['MESSI','FC BARCELONA','ARGENTINA',169,67,25,'Left foot','SS',98,99,38,74,98,84,82,81,81,99,85,85,93,6,4,50,84,97,98,82,83,76,80,74,2,3,2,6,76,83,904,55704866],
['INIESTA','FC BARCELONA','SPAIN',170,65,28,'Right foot','CMF',97,90,62,64,97,94,91,86,74,83,72,82,98,8,6,50,78,87,87,78,75,88,77,63,2,3,2,6,77,96,751,49828981],
['XAVI','FC BARCELONA','SPAIN',170,68,32,'Right foot','CMF',97,86,68,70,90,98,95,90,84,73,79,82,95,5,4,50,78,83,76,74,74,90,78,73,3,3,3,8,80,98,458,42893249],
['RONALDO','REAL MADRID','PORTUGAL',187,80,27,'Right foot','SS',97,99,30,95,97,83,83,87,92,92,93,85,90,7,5,50,85,87,97,87,90,78,96,89,2,3,1,5,74,72,2122,60822237],
['THIAGO SILVA','PARIS SAINT-GERMAIN','BRAZIL',183,79,28,'Right foot','CB',96,62,95,81,77,81,81,83,84,65,75,66,78,5,5,50,93,77,79,86,87,83,84,92,3,2,3,7,83,78,1203,52174484],
['AL HABSI','LANCASHIRE ATHLETIC','OMAN',194,79,30,'Right foot','GK',84,30,83,55,54,54,56,58,66,45,45,45,53,4,3,82,95,70,55,67,84,63,79,87,3,2,2,6,79,68,71,9326020]
    ]);

    var dashboard = new google.visualization.Dashboard(document.querySelector('#dashboard'));

    var stringFilter = new google.visualization.ControlWrapper({
        controlType: 'StringFilter',
        containerId: 'string_filter_div',
        options: {
            filterColumnIndex: 0
        }
    });

    var stringFilter = new google.visualization.ControlWrapper({
        controlType: 'StringFilter',
        containerId: 'position',
        options: {
            filterColumnIndex: 7
        }
    });

    var numberRangeFilter = new google.visualization.ControlWrapper({
        controlType: 'NumberRangeFilter',
        containerId: 'numnber_range_filter_div',
        options: {
            filterColumnIndex: 5,
            minValue: 0,
            maxValue: 100,
            ui: {
                label: 'Overall Rating'
            }
        }
    });

    var numberRangeFilter = new google.visualization.ControlWrapper({
        controlType: 'NumberRangeFilter',
        containerId: 'height',
        options: {
            filterColumnIndex: 3,
            minValue: 160,
            maxValue: 210,
            ui: {
                label: 'Height'
            }
        }
    });

    var table = new google.visualization.ChartWrapper({
        chartType: 'Table',
        containerId: 'table_div',
        options: {
            showRowNumber: true
        }
    });

    dashboard.bind([stringFilter, numberRangeFilter], [table]);
    dashboard.draw(data);
}
google.load('visualization', '1', {packages:['controls'], callback: drawTable});

任何人都可以看到此代码有什么问题或知道原因吗？欢呼声。

Answer 1

您已为相同类型的所有控件提供相同的变量名称，因此较早的控件将被后续控件覆盖。为控件使用不同的变量名来解决此问题：

function drawTable() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('string', 'Team');
    data.addColumn('string', 'Nationality');
    data.addColumn('number', 'Height');
    data.addColumn('number', 'Weight');
    data.addColumn('number', 'Age');
    data.addColumn('string', 'Foot');
    data.addColumn('string', 'Position');
    data.addColumn('number', 'Overall Rating');
    data.addColumn('number', 'Attack');
    data.addColumn('number', 'Defense');
    data.addColumn('number', 'Header Accuracy');
    data.addColumn('number', 'Dribble Accuracy');
    data.addColumn('number', 'Short Pass Accuracy');
    data.addColumn('number', 'Short Pass Speed');
    data.addColumn('number', 'Long Pass Accuracy');
    data.addColumn('number', 'Long Pass Speed');
    data.addColumn('number', 'Shot Accuracy');
    data.addColumn('number', 'Place Kicking');
    data.addColumn('number', 'Swerve');
    data.addColumn('number', 'Ball Control');
    data.addColumn('number', 'Weak Foot Accuracy');
    data.addColumn('number', 'Weak Foot Usage');
    data.addColumn('number', 'Goal Keeping');
    data.addColumn('number', 'Responsiveness');
    data.addColumn('number', 'Explosive Power');
    data.addColumn('number', 'Dribble Speed');
    data.addColumn('number', 'Top Speed');
    data.addColumn('number', 'Body Balance');
    data.addColumn('number', 'Stamina');
    data.addColumn('number', 'Kicking Power');
    data.addColumn('number', 'Jump');
    data.addColumn('number', 'Injury');
    data.addColumn('number', 'Attack 2');
    data.addColumn('number', 'Defence 2');
    data.addColumn('number', 'Form');
    data.addColumn('number', 'Tenacity');
    data.addColumn('number', 'Teamwork');
    data.addColumn('number', 'Owners');
    data.addColumn('number', 'Price');
    data.addRows([
        ['MESSI','FC BARCELONA','ARGENTINA',169,67,25,'Left foot','SS',98,99,38,74,98,84,82,81,81,99,85,85,93,6,4,50,84,97,98,82,83,76,80,74,2,3,2,6,76,83,904,55704866],
        ['INIESTA','FC BARCELONA','SPAIN',170,65,28,'Right foot','CMF',97,90,62,64,97,94,91,86,74,83,72,82,98,8,6,50,78,87,87,78,75,88,77,63,2,3,2,6,77,96,751,49828981],
        ['XAVI','FC BARCELONA','SPAIN',170,68,32,'Right foot','CMF',97,86,68,70,90,98,95,90,84,73,79,82,95,5,4,50,78,83,76,74,74,90,78,73,3,3,3,8,80,98,458,42893249],
        ['RONALDO','REAL MADRID','PORTUGAL',187,80,27,'Right foot','SS',97,99,30,95,97,83,83,87,92,92,93,85,90,7,5,50,85,87,97,87,90,78,96,89,2,3,1,5,74,72,2122,60822237],
        ['THIAGO SILVA','PARIS SAINT-GERMAIN','BRAZIL',183,79,28,'Right foot','CB',96,62,95,81,77,81,81,83,84,65,75,66,78,5,5,50,93,77,79,86,87,83,84,92,3,2,3,7,83,78,1203,52174484],
        ['AL HABSI','LANCASHIRE ATHLETIC','OMAN',194,79,30,'Right foot','GK',84,30,83,55,54,54,56,58,66,45,45,45,53,4,3,82,95,70,55,67,84,63,79,87,3,2,2,6,79,68,71,9326020]
    ]);

    var dashboard = new google.visualization.Dashboard(document.querySelector('#dashboard'));

    var stringFilter1 = new google.visualization.ControlWrapper({
        controlType: 'StringFilter',
        containerId: 'string_filter_div',
        options: {
            filterColumnIndex: 0
        }
    });

    var stringFilter2 = new google.visualization.ControlWrapper({
        controlType: 'StringFilter',
        containerId: 'position',
        options: {
            filterColumnIndex: 7
        }
    });

    var numberRangeFilter1 = new google.visualization.ControlWrapper({
        controlType: 'NumberRangeFilter',
        containerId: 'numnber_range_filter_div',
        options: {
            filterColumnIndex: 5,
            minValue: 0,
            maxValue: 100,
            ui: {
                label: 'Overall Rating'
            }
        }
    });

    var numberRangeFilter2 = new google.visualization.ControlWrapper({
        controlType: 'NumberRangeFilter',
        containerId: 'height',
        options: {
            filterColumnIndex: 3,
            minValue: 160,
            maxValue: 210,
            ui: {
                label: 'Height'
            }
        }
    });

    var table = new google.visualization.ChartWrapper({
        chartType: 'Table',
        containerId: 'table_div',
        options: {
            showRowNumber: true
        }
    });

    dashboard.bind([stringFilter1, stringFilter2, numberRangeFilter1, numberRangeFilter2], [table]);
    dashboard.draw(data);
}
google.load('visualization', '1', {packages:['controls'], callback: drawTable});