是否可以从一行中的值创建下拉控件包装器?

时间:2014-09-20 04:55:41

标签: javascript jquery html5 user-interface google-visualization

是否可以创建一个类别过滤器,从表格水平轴的某些部分获取值。例如在表格中:

Heading 1|Heading 2|Heading 3|Heading 4|Heading 5  
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  
AValue  1|AValue  2|AValue  3|AValue  4|AValue  5  
BValue  1|BValue  2|BValue  3|BValue  4|BValue  5  
CValue  1|CValue  2|CValue  3|CValue  4|CValue  5

是否可以使用Heading3,Heading4,Heading5作为值创建下拉列表,然后显示的图表数据只是选定的特定标题下面的数据,而不是使用Heading1的值下拉列表?

var CountryPicker = new google.visualization.ControlWrapper({ 
        controlType: 'CategoryFilter', 
        containerId: 'control3', 
        options: { 
            filterColumnLabel: 'Location', 
            ui: { 
                labelStacking: 'vertical', 
                allowTyping: false, 
                allowMultiple: true, 
                caption: 'Country', 
                label: '' 
            } 
        } 
    }); 

修改 这是数据表的图像,我希望能够通过下拉列表按男性,女性和总计进行过滤。 Data Table Layout

geochart的CSV函数:

function drawVisualization() { 

$.get("Data_Actual_V2.csv", function(csvString) { 
        var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
          for (var i = 1; i < arrayData[0].length; i++) {       
          $("select").append("<option value='" + i + "'>" + arrayData[0][i] + "</option");
          }

        $("#range option[value='1']").attr("selected","selected");
        var data = new google.visualization.arrayToDataTable(arrayData);

var geoChart = new google.visualization.ChartWrapper({ 
    chartType: 'GeoChart', 
    containerId: 'chart1', 
    options: { 
        title: 'A', 
        displayMode: 'regions', 
        width: 1000, 
        datalessRegionColor: 'C0C0C0', 
        colorAxis: { 
            values: [0, 12.5, 25, 37.5, 50, 62.5, 75, 87.5, 100], 
            colors: ['#3366FF','#33CCCC', '#00FFFF', '#CCFFFF', '#00FF00', '#FFFF99','#FFCC00','#FF9900','#FF0000'], 
            minValue: 0, 
            maxValue: 100, 
        } 
    }, 
    view: { // Defines data to show in geoChart 
        columns: [0, 4] 
    } 
}); 

EDIT2:我首先要求使用单个过滤器的图表,但最初有多个过滤器可用。例如,选择国家,然后按上述方法选择。在完成上述工作之前我是如何做到这一点的一个例子如下,但我如何将其与下面的小提琴中描述的方法结合起来呢?

    var CountryPicker = new google.visualization.ControlWrapper({ 
    controlType: 'CategoryFilter', 
    containerId: 'control3', 
    options: { 
        filterColumnLabel: 'Location', 
        ui: { 
            labelStacking: 'vertical', 
            allowTyping: false, 
            allowMultiple: true, 
            caption: 'Country', 
            label: '' 
        } 
    } 
}); 
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard')); 

dashboard.bind([CountryPicker, GenderPicker, slider2],[geoChart]). // consolidated all of the bind calls 
// Draw the dashboard 

draw(data); 

0 个答案:

没有答案