Jquery ui 使用jQuery滑块更改Google图表视图窗口_Jquery Ui_Slider_Google Visualization

Jquery ui 使用jQuery滑块更改Google图表视图窗口

jquery-ui google-visualization

Jquery ui 使用jQuery滑块更改Google图表视图窗口,jquery-ui,slider,google-visualization,Jquery Ui,Slider,Google Visualization,我准备了一个带有屏幕截图的简单测试用例，演示了我的问题，我可能遗漏了一点点，只有几行代码我有一张图表，显示了几周来网络游戏的胜负即，纵轴代表比赛分数，横轴代表周数我的ajax脚本返回52周的数据，但我想添加一个滑块，允许用户将查看的周数更改为12到52之间的任何数字有人能告诉我如何修改这个函数吗 $("#money_slider").slider({ min: 12, max: 52, change: function(event, ui) {

我准备了一个带有屏幕截图的简单测试用例，演示了我的问题，我可能遗漏了一点点，只有几行代码

我有一张图表，显示了几周来网络游戏的胜负

即，纵轴代表比赛分数，横轴代表周数

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

有人能告诉我如何修改这个函数吗

$("#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>


h3，p，div{
文本对齐：居中；
}
#滑块{
宽度：700px；
左边距：自动；
右边距：自动；
}
@进口”https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css";
setOnLoadCallback（drawChart）；
$（函数（）{
$（“#滑块”）。滑块({
残疾人:对,，
范围：“分钟”，
民:12,，
最高：52，
更改：函数（事件、ui）{
//XXX在这里做什么
//hAxis.viewWindow.min和.max？
$（“#header”）.text（“debug=“+ui.value”）；
}
});
});
函数绘图图（）{
“标签”的“星期领导人”、“类型”的“标签”的“标签”的“星期领导人”、“类型”的“数字”号，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，}，{“v”：0}，{“v”{“v”：10679}，，，{“v”：0.0，，，，{“v”：0}，，{“v”：0，，，，{“v”：0}，，，，，，，，，，，，，{“c”的，，，{“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 0，，，，，，，，，，，，，，，，，，，，{“c”c“““““，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，：8836}，{“v”：0}，{“v”：-1686}，{“c”：[{“v”：“2011-47}，{“v”：10358}，{“v”：0}，{“v”：-2120}，{“c”：[{“v”：“2011-48}，{“v”：9956}{，“v”：0.0，，，{“v”：0.0，，，，，{“v”：0.0，，，，，{“v”：0.0，，，，，{“v”：0.0，，，，，，，，，，，，{“v”：0.0”0，，，，，，，，，，，，，，，，，{“c”c““““““““：：：：，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，(三):(三):(五):(五):(五):(五):(五):(二),(五):(二)),((五):):(二))){“v:“v:“2012-3”的“2012-3”的“v:“2012-3”的“v:“2012-3”的“2012-3”的“v:“2012-3”的“2012-3”的“2012-3”的“v”，“2012-03”的“，，，，，，，{“v”：2012-03”3.3万，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，v:8318}，{“v:1704}，{“v:0}]}，{“c”：[{“v”：“2012-08”}，{“v”：8208}，{“v”：0}，{“v”：-104}，{“c”：[{“v”：“2012-09”}，{“v”：“2012-09”}，{“v”：“c”：，{“v”：”2012-10，，，，{“v”7 7 7 7 7 7 7，，，，，，，，，，，{“v”：7797}，，，，{“v”7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7，”，，，，，，，{“v”：27:272}，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，{“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=新的google.visualization.DataTable（jsonData）；
变量选项={
宽度：700，
身高：500，
图例：{位置：'top'}，
面积不透明度：1.0，
变量：{格式：'$#'}，
hAxis:{title:'Week number'，titleTextStyle:{color:'blue'}，slidedtext:true}，
颜色：['CCFFCC'，'66CC66'，'FF9999']，
动画：{持续时间：1000，'out'}
};
var chart=new google.visualization.SteppedAreaChart（document.getElementById（'money'）；
google.visualization.events.addListener（图表'ready'，函数（）{
$（'#slider'）。slider（'enable'）；
});
图表绘制（数据、选项）；
}
钱

我已经读过了（在底部），但是现在还不必再去摸索了。

我自己的解决方案（尽管Opera 11.62存在渲染问题-我已经申请了）：


h3，p，div{
文本对齐：居中；
}
#滑块{
宽度：700px；
左边距：自动；
右边距：自动；
}
@进口”https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css";
setOnLoadCallback（initChart）；
“标签”的“星期领导人”、“类型”的“标签”的“标签”的“星期领导人”、“类型”的“数字”号，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，}，{“v”：0}，{“v”{“v”：10679}，，，{“v”：0}，，，，{“v”：0}，，{“v”：0}，，，{“v”：0}，，，{“c”的，，，，{“c”的，，{“c”的，，{“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 0，，，，，，，，，，，，，，，，，，，，{“c”c“““““，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，：8836}，{“v”：0}，{“v”：-1686}，{“c”：[{“v”：“2011-47}，{“v”：10358}，{“v”：0}，{“v”：-2120}，{“c”：[{“v”：“2011-48}，{“v”：9956}{，“v”：0.0，，，{“v”：0.0，，，，，{“v”：0.0，，，，，{“v”：0.0，，，，，{“v”：0.0，，，，，，，，，，，，{“v”：0.0”0，，，，，，，，，，，，，，，，，{“c”c““““““““：：：：，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，34}]}，{“c”：[{“v”：“2012-01”}，{“v”：
<!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>