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

我希望在我的数据库中包含多个字符串和数字范围过滤器。不过，现在只是让他们各放一个，我不明白为什么

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

HTML:

---

有人能看到这个代码有什么问题吗，或者知道原因吗？干杯。

您为同一类型的所有控件指定了相同的变量名，因此早期的控件将被后期的控件覆盖。为控件使用不同的变量名来解决此问题：

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});

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});

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});