使用jQuery滑块更改Google图表viewWindow [英] Using jQuery slider to change Google chart viewWindow

查看：69
本文介绍了使用jQuery滑块更改Google图表viewWindow的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我准备了一个带有截图的简单测试用例，演示了我的问题，并且可能缺少一点点，只有几行代码。



在过去几周的网络游戏中赢得和失败。

纵轴代表游戏得分，横轴代表星期数。

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

.pngalt =截图>



任何人都可以请教我，如何修改 change function？

  $（＃money_slider）。slider （{
 min：12，
 max：52，
 change：function（event，ui）{
 // XXX在这里用
 // hAxis .viewWindow.min和.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 / csstitle =currentStyle> 
 @importhttps://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css; 
< / style> 
< script type =text / javascriptsrc =https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js>< / script> 
< script type =text / javascriptsrc =https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js>< / script> 
< script type =text / javascriptsrc =https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js>< /脚本> 
< script type =text / javascriptsrc =https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version'： '1'， '包'：[ 'corechart']， '语言'： 'RU'}]}>< /脚本> 
< script type =text / javascript> 
 
 google.setOnLoadCallback（drawChart）; 
 
 $（b $ b $（'＃slider'）。slider（{
 disabled：true，
 range：'min'，
 min：12，
 max：52，
 change：function（event，ui）{
 // XXX在这里用
 // hAxis.viewWindow.min和.max？
 $（＃header）.text（debug =+ ui.value）; 
} 
}）; 
}）; 
 
函数drawChart（）{
 var jsonData ='{cols：[{label：Week number，type：string}，{label ：星期领导者，类型：数字}，{标签：您的胜利，类型：数字}，{标签：您的损失，类型： }]， 行 ：[{ 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：{格式：'$＃'}，
 hAxis：{title：'Week number'，titleTextStyle：{color：'blue'}，slantedText：true}，
 colors：['CCFFCC' ，'66CC66'，'FF9999']，
动画：{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>

我读过谷歌示例（底部），但不要呻吟它。

解决方案

我自己的解决方案（Opera 11.62出现渲染问题 - 我提交了一个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 / csstitle =currentStyle> 
 @importhttps://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css; 
< / style> 
< script type =text / javascriptsrc =https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js>< / script> 
< script type =text / javascriptsrc =https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js>< / script> 
< script type =text / javascriptsrc =https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version'： '1'， '包'：[ 'corechart']， '语言'： 'RU'}]}>< /脚本> 
< 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']，
动画：{duration：1000，easing：'out'} 
}; 
 
 $（b $ b $（'＃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（）; 
} 
}）; 
}） ; 
 
函数initChart（）{
 chart = new google.visualization.SteppedAreaChart（document.getElementById（'money'））; 
 google.visualization.events.addListener（chart，'ready'，function（）{
 $（'＃slider'）。slider（'enable'）; 
}）; 
 drawChart（）; 
 
函数drawChart（）{
 chart.draw（data，options）; 
} 
< / script> 
< / head> 
 
< body> 
< h3 id =header> Money< / h3> 
< div id =money>< / div> 
< div id =slider>< / div> 
< / body> 
< / html>


I have prepared a simple test case with screenshot, demonstrating my problem and am probably missing a tiny bit, just few lines of code.

I have a diagram representing wins and losses in a web game over the weeks.

I.e. the vertical axis represents the game score and the horizontal axis represents numbers of weeks.

My ajax script returns the data for 52 weeks, but I'd like to add a slider and allow users change the viewed number of weeks to any number between 12 and 52.

Can anybody please advise me, how to modify the change function?

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

Below is my complete test case, just save it to an .html file and you will be able to try it in a browser:

<!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>

I've read the Google example (on the bottom), but don't grok it yet.

解决方案

My own solution (has rendering problems with Opera 11.62 though - I've filed a bug #882 for that):

<!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>

这篇关于使用jQuery滑块更改Google图表viewWindow的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆