使用jQuery滑块更改Google图表viewWindow

时间：2012-04-21 17:24:56

标签： jquery-ui slider google-visualization

我准备了一个带有屏幕截图的简单测试用例，演示了我的问题，可能只是遗漏了一小部分代码。

我有一张图表代表了几周内网络游戏中的输赢。

即。纵轴表示游戏分数，横轴表示周数。

我的ajax脚本返回52周的数据，但我想添加一个滑块，允许用户将查看的周数更改为12到52之间的任何数字。

screenshot

有人可以告诉我，如何修改change功能？

$("#money_slider").slider({
    min: 12, 
    max: 52,
    change: function(event, ui) { 
        // XXX what to do here with
        // hAxis.viewWindow.min and .max?
    }
});

下面是我的完整测试用例，只需将其保存为.html文件，您就可以在浏览器中尝试：

<!DOCTYPE HTML>
<html>
<style type="text/css">
    h3,p,div { 
        text-align: center; 
    }

    #slider { 
        width: 700px; 
        margin-left: auto; 
        margin-right: auto; 
    }
</style>
<style type="text/css" title="currentStyle">
        @import "https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css";
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart'],'language':'ru'}]}"></script>
<script type="text/javascript">

google.setOnLoadCallback(drawChart);

$(function() {
    $('#slider').slider({
        disabled: true,
        range: 'min',
        min: 12,
        max: 52,
        change: function(event, ui) { 
            // XXX what to do here with
            // hAxis.viewWindow.min and .max?
            $("#header").text("debug=" + ui.value);
        }
    });
});

function drawChart() {
        var jsonData = '{"cols":[{"label":"Week number","type":"string"},{"label":"Week leader","type":"number"},{"label":"Your win","type":"number"},{"label":"Your loss","type":"number"}],"rows":[{"c":[{"v":"2011-33"},{"v":10671},{"v":0},{"v":-3113}]},{"c":[{"v":"2011-34"},{"v":7975},{"v":0},{"v":-2113}]},{"c":[{"v":"2011-35"},{"v":11009},{"v":0},{"v":-2244}]},{"c":[{"v":"2011-36"},{"v":10679},{"v":0},{"v":-689}]},{"c":[{"v":"2011-37"},{"v":11197},{"v":305},{"v":0}]},{"c":[{"v":"2011-38"},{"v":6762},{"v":419},{"v":0}]},{"c":[{"v":"2011-39"},{"v":7823},{"v":0},{"v":-1563}]},{"c":[{"v":"2011-40"},{"v":10171},{"v":1152},{"v":0}]},{"c":[{"v":"2011-41"},{"v":9903},{"v":0},{"v":-1008}]},{"c":[{"v":"2011-42"},{"v":5940},{"v":0},{"v":-1332}]},{"c":[{"v":"2011-43"},{"v":7979},{"v":0},{"v":-593}]},{"c":[{"v":"2011-44"},{"v":7833},{"v":0},{"v":-653}]},{"c":[{"v":"2011-45"},{"v":9691},{"v":0},{"v":-562}]},{"c":[{"v":"2011-46"},{"v":8836},{"v":0},{"v":-1686}]},{"c":[{"v":"2011-47"},{"v":10358},{"v":0},{"v":-2120}]},{"c":[{"v":"2011-48"},{"v":9956},{"v":0},{"v":-1353}]},{"c":[{"v":"2011-49"},{"v":8787},{"v":160},{"v":0}]},{"c":[{"v":"2011-50"},{"v":9590},{"v":0},{"v":0}]},{"c":[{"v":"2011-51"},{"v":8931},{"v":887},{"v":0}]},{"c":[{"v":"2011-52"},{"v":8529},{"v":0},{"v":-1434}]},{"c":[{"v":"2012-01"},{"v":8680},{"v":0},{"v":-1416}]},{"c":[{"v":"2012-02"},{"v":9932},{"v":0},{"v":-169}]},{"c":[{"v":"2012-03"},{"v":8334},{"v":0},{"v":-3149}]},{"c":[{"v":"2012-04"},{"v":8077},{"v":217},{"v":0}]},{"c":[{"v":"2012-05"},{"v":7788},{"v":0},{"v":-3683}]},{"c":[{"v":"2012-06"},{"v":10070},{"v":113},{"v":0}]},{"c":[{"v":"2012-07"},{"v":8318},{"v":1704},{"v":0}]},{"c":[{"v":"2012-08"},{"v":8208},{"v":0},{"v":-104}]},{"c":[{"v":"2012-09"},{"v":11561},{"v":272},{"v":0}]},{"c":[{"v":"2012-10"},{"v":7797},{"v":0},{"v":0}]},{"c":[{"v":"2012-11"},{"v":9893},{"v":0},{"v":-90}]},{"c":[{"v":"2012-12"},{"v":9197},{"v":0},{"v":-191}]},{"c":[{"v":"2012-13"},{"v":7287},{"v":651},{"v":0}]},{"c":[{"v":"2012-14"},{"v":7072},{"v":646},{"v":0}]},{"c":[{"v":"2012-15"},{"v":7183},{"v":0},{"v":-907}]},{"c":[{"v":"2012-16"},{"v":6021},{"v":0},{"v":-993}]}]}';

        var data = new google.visualization.DataTable(jsonData);
        var options = {
          width: 700,
          height: 500,
          legend: {position: 'top'},
          areaOpacity: 1.0,
          vAxis: {format: '$#'},
          hAxis: {title: 'Week number', titleTextStyle: {color: 'blue'}, slantedText: true},
          colors: ['CCFFCC', '66CC66', 'FF9999'],
          animation: {duration: 1000, easing: 'out'}
        };

        var chart = new google.visualization.SteppedAreaChart(document.getElementById('money'));
        google.visualization.events.addListener(chart, 'ready', function() {
            $('#slider').slider('enable');
        });
        chart.draw(data, options);
}
</script>
</head>

<body>
<h3 id="header">Money</h3>
<div id="money"></div>
<div id="slider"></div>
</body>
</html>

我已经阅读了the Google example（在底部），但还没有理解它。

1 个答案:

答案 0 :(得分：1)

我自己的解决方案（虽然Opera 11.62有渲染问题 - 我已经为此提交了a bug #882）：

<!DOCTYPE HTML>
<html>
<style type="text/css">
    h3,p,div { 
        text-align: center; 
    }

    #slider { 
        width: 700px; 
        margin-left: auto; 
        margin-right: auto; 
    }
</style>
<style type="text/css" title="currentStyle">
        @import "https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css";
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart'],'language':'ru'}]}"></script>
<script type="text/javascript">

google.setOnLoadCallback(initChart);

var jsonData = '{"cols":[{"label":"Week number","type":"string"},{"label":"Week leader","type":"number"},{"label":"Your win","type":"number"},{"label":"Your loss","type":"number"}],"rows":[{"c":[{"v":"2011-33"},{"v":10671},{"v":0},{"v":-3113}]},{"c":[{"v":"2011-34"},{"v":7975},{"v":0},{"v":-2113}]},{"c":[{"v":"2011-35"},{"v":11009},{"v":0},{"v":-2244}]},{"c":[{"v":"2011-36"},{"v":10679},{"v":0},{"v":-689}]},{"c":[{"v":"2011-37"},{"v":11197},{"v":305},{"v":0}]},{"c":[{"v":"2011-38"},{"v":6762},{"v":419},{"v":0}]},{"c":[{"v":"2011-39"},{"v":7823},{"v":0},{"v":-1563}]},{"c":[{"v":"2011-40"},{"v":10171},{"v":1152},{"v":0}]},{"c":[{"v":"2011-41"},{"v":9903},{"v":0},{"v":-1008}]},{"c":[{"v":"2011-42"},{"v":5940},{"v":0},{"v":-1332}]},{"c":[{"v":"2011-43"},{"v":7979},{"v":0},{"v":-593}]},{"c":[{"v":"2011-44"},{"v":7833},{"v":0},{"v":-653}]},{"c":[{"v":"2011-45"},{"v":9691},{"v":0},{"v":-562}]},{"c":[{"v":"2011-46"},{"v":8836},{"v":0},{"v":-1686}]},{"c":[{"v":"2011-47"},{"v":10358},{"v":0},{"v":-2120}]},{"c":[{"v":"2011-48"},{"v":9956},{"v":0},{"v":-1353}]},{"c":[{"v":"2011-49"},{"v":8787},{"v":160},{"v":0}]},{"c":[{"v":"2011-50"},{"v":9590},{"v":0},{"v":0}]},{"c":[{"v":"2011-51"},{"v":8931},{"v":887},{"v":0}]},{"c":[{"v":"2011-52"},{"v":8529},{"v":0},{"v":-1434}]},{"c":[{"v":"2012-01"},{"v":8680},{"v":0},{"v":-1416}]},{"c":[{"v":"2012-02"},{"v":9932},{"v":0},{"v":-169}]},{"c":[{"v":"2012-03"},{"v":8334},{"v":0},{"v":-3149}]},{"c":[{"v":"2012-04"},{"v":8077},{"v":217},{"v":0}]},{"c":[{"v":"2012-05"},{"v":7788},{"v":0},{"v":-3683}]},{"c":[{"v":"2012-06"},{"v":10070},{"v":113},{"v":0}]},{"c":[{"v":"2012-07"},{"v":8318},{"v":1704},{"v":0}]},{"c":[{"v":"2012-08"},{"v":8208},{"v":0},{"v":-104}]},{"c":[{"v":"2012-09"},{"v":11561},{"v":272},{"v":0}]},{"c":[{"v":"2012-10"},{"v":7797},{"v":0},{"v":0}]},{"c":[{"v":"2012-11"},{"v":9893},{"v":0},{"v":-90}]},{"c":[{"v":"2012-12"},{"v":9197},{"v":0},{"v":-191}]},{"c":[{"v":"2012-13"},{"v":7287},{"v":651},{"v":0}]},{"c":[{"v":"2012-14"},{"v":7072},{"v":646},{"v":0}]},{"c":[{"v":"2012-15"},{"v":7183},{"v":0},{"v":-907}]},{"c":[{"v":"2012-16"},{"v":6021},{"v":0},{"v":-993}]}]}';

var data = new google.visualization.DataTable(jsonData);
var chart;
var options = {
    width: 700,
    height: 500,
    legend: {position: 'top'},
    areaOpacity: 1.0,
    vAxis: {format: '$#'},
    hAxis: {title: 'Week number', titleTextStyle: {color: 'blue'}, slantedText: true, viewWindow: {min: 20, max: 35}},
    colors: ['CCFFCC', '66CC66', 'FF9999'],
    animation: {duration: 1000, easing: 'out'}
};

$(function() {
    $('#slider').slider({
        disabled: true,
        range: 'min',
        value: 20,
        min: 0,
        max: 20,
        change: function(event, ui) { 
            $('#header').text('debug=' + ui.value);
            options.hAxis.viewWindow.min = ui.value;
            drawChart();
        }
    });
});

function initChart() {
    chart = new google.visualization.SteppedAreaChart(document.getElementById('money'));
    google.visualization.events.addListener(chart, 'ready', function() {
        $('#slider').slider('enable');
    });
    drawChart();
}
function drawChart() {
    chart.draw(data, options);
}
</script>
</head>

<body>
<h3 id="header">Money</h3>
<div id="money"></div>
<div id="slider"></div>
</body>
</html>
相关问题
最新问题