0

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

1 に答える 1

0

Visual Studio 2012 でこのページをデバッグしているときに複数のエラーが発生しましたが、最初の問題は解決しました (何らかの理由で起動しないスライダーを取り除いた後)。

基本的に、ゲージ表示に使用される文字列で列 0 を更新しています。

数値で列 1 を更新する必要があります。

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

スライダーの修正も行っている場合は、最初にこの修正を行ってください。

于 2013-08-13T13:55:55.477 に答える