Jquery 如何动态更新Google Gauge_Jquery_Html_Google Gauges

Jquery 如何动态更新Google Gauge

jquery html

Jquery 如何动态更新Google Gauge,jquery,html,google-gauges,Jquery,Html,Google Gauges,我一直在尝试动态更新Google Gauge，但尽管看了其他几个问题，我还是无法让它工作代码如下，但我需要能够做的是将滑块设置为一个值，然后按下go链接。这将更新仪表。我能做的就是修改课文有人能指出我哪里出了问题吗 <!doctype html> <html lang="en"> <head> <title></title> <meta charset="utf-8"> <link rel

我一直在尝试动态更新Google Gauge，但尽管看了其他几个问题，我还是无法让它工作

代码如下，但我需要能够做的是将滑块设置为一个值，然后按下go链接。这将更新仪表。我能做的就是修改课文

有人能指出我哪里出了问题吗

<!doctype html>
<html lang="en">
<head>
    <title></title>
    <meta charset="utf-8">

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>  
    <script type='text/javascript' src='http://www.google.com/jsapi'></script>
    <script type='text/javascript' src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

    <script type='text/javascript'>
            google.load('visualization', '1', {packages:['gauge']});
            google.setOnLoadCallback(drawChart);
    </script>

    <script type='text/javascript'>
        function recordValue() {

            var val = document.getElementById("amount").value;

            setValue(val);

            return true;

        }
    </script>

</head>

<body>

    <div id='chart_div'></div>
    <p>
        <label for="amount">Slider value:</label>
        <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
    </p>
    <div id="slider-range-max"></div>
    <div class="go"><a href="#" class="button" onClick="javascript:return recordValue();">Go</a></div>

  <script>
  $(function() {
    $( "#slider-range-max" ).slider({
      range: "max",
      min: 1,
      max: 100,
      value: 50,
      slide: function( event, ui ) {
        $( "#amount" ).val( ui.value );
      }
    });
    $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
  });
  </script>

<script type="text/javascript">

google.load('visualization', '1', {packages: ['gauge']});
google.setOnLoadCallback(drawChart);

var data;
var chart;
var options;

function drawChart() {
    data = new google.visualization.DataTable();
    data.addColumn('string', 'Gauge');
    data.addColumn('number', 'Value');
    data.addRows([

        ['Value', 20]

    ]);

    options= {
            animation: {
                duration: 2000
            },
            height: 300,
            width: 300,
            greenFrom: 40,
            greenTo: 100,
            yellowFrom: 20,
            yellowTo: 40,
            redFrom: 0,
            redTo: 20,
            max: 100
        };

    // make a temporary view to draw the chart in a blank state
    var view = new google.visualization.DataView(data);
    view.setColumns([0, {
        // create a calculated column that contains all zero's
        type: 'number',
        calc: function () {
            return 0;
        }
    }]);

    chart = new google.visualization.ChartWrapper({
        chartType: 'Gauge',
        containerId: 'chart_div',
        dataTable: view,
        options: {
            animation: {
                duration: 2000
            },
            height: 300,
            width: 300,
            greenFrom: 40,
            greenTo: 100,
            yellowFrom: 20,
            yellowTo: 40,
            redFrom: 0,
            redTo: 20,
            max: 100
            }    });

    var runOnce = google.visualization.events.addListener(chart, 'ready', function () {
        google.visualization.events.removeListener(runOnce);
        // use the real data to redraw
        chart.setDataTable(data);

        chart.draw();
    });

    chart.draw();
}

function setValue(val){
   data.setValue(0, 0, "['Value', val]");
   chart.draw(data, options);   
}

</script>


</body>
</html>


load（'visualization'，'1'，{packages:['gauge']}）；
setOnLoadCallback（drawChart）；
函数recordValue（）{
var val=document.getElementById（“金额”）.value；
设定值（val）；
返回true；
}

滑块值：

$（函数（）{
$（“#滑块最大范围”）.滑块({
射程：“最大”，
民:1,，
最高：100，
价值：50，
幻灯片：功能（事件、用户界面）{
美元（“#金额”）.val（ui.value）；
}
});
$（“金额”）.val（$（“滑块范围最大”）.slider（“值”）；
});
load（'visualization'，'1'，{packages:['gauge']}）；
setOnLoadCallback（drawChart）；
var数据；
var图；
var期权；
函数绘图图（）{
data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Gauge'）；
data.addColumn（'number'，'Value'）；
data.addRows([
[Value'，20]
]);
选项={
动画：{
持续时间：2000年
},
身高：300，
宽度：300，
格林斯潘：40，
格林托：100，
发黄时间:20,，
yellowTo:40，
发自:0,，
雷德托：20，
最高：100
};
//创建临时视图以在空白状态下绘制图表
var view=newgoogle.visualization.DataView（数据）；
view.setColumns（[0{
//创建包含所有零的计算列
键入：“编号”，
计算：函数（）{
返回0；
}
}]);
chart=新的google.visualization.ChartWrapper({
图表类型：“仪表”，
集装箱船：“海图分区”，
数据表：视图，
选项：{
动画：{
持续时间：2000年
},
身高：300，
宽度：300，
格林斯潘：40，
格林托：100，
发黄时间:20,，
yellowTo:40，
发自:0,，
雷德托：20，
最高：100
}    });
var runOnce=google.visualization.events.addListener（图表'ready'，函数（）{
google.visualization.events.removeListener（runOnce）；
//使用真实数据重新绘制
图表.可设置数据表（数据）；
chart.draw（）；
});
chart.draw（）；
}
函数设置值（val）{
data.setValue（0,0，“['Value'，val]”）；
图表绘制（数据、选项）；
}

我在Visual Studio 2012中调试此页面时遇到多个错误，但确实解决了第一个问题（在撕下滑块后，滑块由于某种原因无法启动）

基本上，您正在使用用于仪表显示的字符串更新列0

您需要使用数值更新第1列：

function setValue(val){
    data.setValue(0, 1, parseInt(val));
    chart.draw(data, options);
}

如果您也在寻找滑块的修复程序，请先进行另一次修复。

您是否能够为此示例设置JSFIDLE？尝试后，答案似乎是“不，我不能”-仪表或滑块都不会出现。请注意，您还重复了load和setOnLoadCallback调用，其中至少有一个在定义回调之前发生。您好，感谢它解决了这个问题！但是，滑块对我来说很好。你能告诉我你使用的是什么浏览器，这样我就可以在那里测试它了吗？对于Visual Studio 2012测试，我使用IE 10，因为它只会在出现错误时中断。对于JSFIDLE测试，我使用打开F12调试窗口的Chrome。我可以得到一切，除了谷歌仪表工作在一个JSFIDLE。。。奇怪的JSFiddle就在这里：@williamsdb：值得单独问一个问题：“为什么谷歌量表不出现在这个JSFiddle中？”：）