Question

我一直在尝试动态更新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>

Answer 1

我在Visual Studio 2012中调试此页面时遇到了多个错误，但确实解决了第一个问题（在删除因某些原因无法启动的滑块之后）。

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

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

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

如果您也在修改了滑块，请先使用此修复程序进行修改。

如何动态更新Google Gauge

1 个答案: