Question

我究竟如何使用jquery ui滑块而不是数字范围过滤器。我知道每个工作的方式，但我不确定这是如何与图表数据相关的。
编辑：整个代码（抱歉评论）：

 <!DOCTYPE html>

<head>
<title>Google Chart Example</title>
<script src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<!--   <script src="http://prithwis.x10.bz/charts/jquery.csv-0.71.js"></script> -->
<script src="https://jquery-csv.googlecode.com/files/jquery.csv-0.71.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<!--script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script-->

<!--script src="http://code.jquery.com/jquery-1.10.2.js"></script-->

<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['controls']});
google.setOnLoadCallback(drawVisualization);



function drawVisualization() { 
// Prepare the data 

//$.get("abc.csv - abc.csv.csv", function(csvString) {
$.get("Data_Actual_V2.csv", function(csvString) {  
     // transform the CSV string into a 2-dimensional array
        var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
     // use arrayData to load the select elements with the appropriate options
          for (var i = 1; i < arrayData[0].length; i++) {       // i starts from 1, not 0 because the first column is text
        // this adds the given option to both select elements
          $("select").append("<option value='" + i + "'>" + arrayData[0][i] + "</option");
          }    
     // set the default selection
        $("#range option[value='1']").attr("selected","selected");
     // this new DataTable object holds all the data
        var data = new google.visualization.arrayToDataTable(arrayData);

var columnsTable = new google.visualization.DataTable();
columnsTable.addColumn('number', 'colIndex');
columnsTable.addColumn('string', 'colLabel');
var initState = {
    selectedValues: []
};
// put the columns into this data table (skip column 0)
for (var i = 2; i < data.getNumberOfColumns(); i++) {
    columnsTable.addRow([i, data.getColumnLabel(i)]);
}
initState.selectedValues.push(data.getColumnLabel(4));







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



/*var slider2 = new google.visualization.ControlWrapper({ 
    //'controlType': 'DateRangeFilter', 
    'controlType': 'NumberRangeFilter',
    'containerId': 'control4', 


    'options': { 
        //'ui.format': 'pattern:"yyyy"',
       // 'ui.format': 'fractionDigits: 0',
        'filterColumnLabel': 'Year',
        'ui': { 'format': { 'fractionDigits':'0',
                            'groupingSymbol':'' } }
    },

}); */




//Define a chart to show AML CFT Risk per country 

var options1 = { 
        title: 'A', 
        displayMode: 'regions', 
        //width: 1000, 
        datalessRegionColor: 'C0C0C0', 
        hAxis: {title: 'Year', }
        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, 
        } 
    }
var xA;
//var yB = 4;

 /*var view1 = { // Defines data to show in geoChart 
        columns: [x1, y1] //[0,4]
    }*/

var geoChart = new google.visualization.ChartWrapper({ 
    chartType: 'GeoChart', 
    containerId: 'chart1', 
    options: options1,
    view: {
        columns: [0, 4]
    }

}); 



$(function() {
$('#slider').slider({
    disabled: true,
    range: 'min',
    value: 44,
    min: 1969,
    max: 2013,
    change: function(event, ui) { 
        $('#header').text('debug=' + ui.value);
        //options1.minValue = ui.value;/////HERE TO LINK TO ABOVE
        xA = ui.value;
        console.log(xA);
        //drawChart();
        setChartView();
    }
}); 
 });



var GenderPicker = new google.visualization.ControlWrapper({
    controlType: 'CategoryFilter',
    containerId: 'control2',
    dataTable: columnsTable,
    options: {
        filterColumnLabel: 'colLabel',
        ui: {
            label: 'Columns',
            allowTyping: false,
            allowMultiple: false,
            allowNone: false,
            selectedValuesLayout: 'belowStacked'
        }
    },
    state: initState
});




 function setChartView() {
    var state = GenderPicker.getState();
    var row;
    var view = {
        columns: [0]
    };

    for (var i = 0; i < state.selectedValues.length; i++) {
        row = columnsTable.getFilteredRows([{
            column: 1,
            value: state.selectedValues[i]
        }])[0];
        view.columns.push(columnsTable.getValue(row, 0));
    }
    // sort the indices into their original order
    view.columns.sort(function (a, b) {
        return (a - b);
    });
    geoChart.setView(view);
    geoChart.draw();
}
google.visualization.events.addListener(GenderPicker, 'statechange', setChartView);
google.visualization.events.addOneTimeListener(geoChart, 'ready', function () {

    $('#slider').slider('enable');
    setChartView();
});

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

dashboard.bind([CountryPicker/*, slider2*/],[geoChart]). // consolidated all of the bind calls 
// Draw the dashboard 
draw(data); 
GenderPicker.draw();
});
}

<body>


<div id="dashboard"> 
<table> 
    <tr style='vertical-align: top'> 
        <td style='width: 300px; font-size: 0.9em;'> 
            <div id="control1"></div> 
            <div id="control2"></div> 
            <div id="control3"></div> 
            <div id="control4"></div> 
            <div id="slider"></div>
            <h3 id ="header">Sometext</h3>

        </td> 
        <td style='width: 600px'> 
            <div style="float: left;" id="chart1"></div> 

        </td> 
    </tr> 
  </table> 
 </div> 
</body>
</html>

一直在尝试关注：Using jQuery slider to change Google chart viewWindow
还有一点：https://stackoverflow.com/questions/26154248/how-to-display-various-controlwrappers-from-2-datatables-with-a-single-geochart?noredirect=1#comment41031194_26154248

EDIT V2 我通过使用标准的谷歌滑块解决了它，并将我的jquery滑块值分配给它的'highValue'。然后我将包含Google滑块的div设置为display: none。

    var slider2 = new google.visualization.ControlWrapper({ 
    'controlType': 'NumberRangeFilter',
    'containerId': 'control4', 


    'options': { 
        'filterColumnLabel': 'Year',
        'ui': { 'format': { 'fractionDigits':'0',
                            'groupingSymbol':'' } }
    },

}); 

    $(function() {
$('#slider').slider({
    disabled: true,
    range: 'min',
    value: 53,
    min: 1960,
    max: 2013,
    change: function(event, ui) { 
        $('#header').text('debug=' + ui.value);
        //options1.minValue = ui.value;/////HERE TO LINK TO ABOVE
        xA = ui.value;
        console.log(xA);
        //drawChart();
        slider2.setState({'highValue': ui.value});
        slider2.draw();

        setChartView();

    }
 }); 
 });

<div id="control4" style="display: none;"></div>

当然，这不是最好或最正确的方法，但确实解决了这个问题。

使用jquery ui slider作为controlwrapper而不是数字范围过滤器？

0 个答案: