Question

我是Highcharts的新手。我正在尝试显示一个简单的仪表，应该在我的服务器向客户端发送新值时更新。我正在使用websocket接收服务器更新，我想使用最新值更新仪表。这不会发生。仪表不会改变。以下是代码。我确信我错过了什么，但不确定是什么。任何帮助将不胜感激。

<html>
<head xmlns:th="http://www.thymeleaf.org">
<title>Highcharts</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
   <script src="https://code.highcharts.com/highcharts.js"></script>    
   <script src="https://code.highcharts.com/highcharts-more.js"></script>
   <script src="https://code.highcharts.com/modules/solid-gauge.js"></script>

   <link href="http://cdn.jsdelivr.net/webjars/bootstrap/3.3.7/css/bootstrap.min.css"
      th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}"
      rel="stylesheet" media="screen" />   
   <script src="js/sockjs-0.3.4.js"></script>
   <script src="js/stomp.js"></script>




</head>
<body>
<div style="width: 600px; height: 400px; margin: 0 auto">
    <div id="container-speed" style="width: 300px; height: 200px; float: left"></div>
    <div id="container-rpm" style="width: 300px; height: 200px; float: left"></div>
</div>
<div>
    <h3>Messages:</h3>
    <ol id="messages"></ol>
</div>
<script language="JavaScript">
//<![CDATA[
$(document).ready(function() {  
    var newValue;
    var initialValue = 60;
    console.log("page loaded");


   var chart = {      
      type: 'solidgauge'
   };
   var title = null;

   var pane = {
      center: ['50%', '85%'],
      size: '140%',
      startAngle: -90,
      endAngle: 90,
      background: {
         backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
         innerRadius: '60%',
         outerRadius: '100%',
         shape: 'arc'
      }
   };

   var tooltip = {
      enabled: false
   };

   // the value axis
   var yAxis = {
      stops: [
         [0.1, '#55BF3B'], // green
         [0.5, '#DDDF0D'], // yellow
         [0.9, '#DF5353'] // red
      ],
      lineWidth: 0,
      minorTickInterval: null,
      tickPixelInterval: 400,
      tickWidth: 0,
      title: {
         y: -70
      },
      labels: {
         y: 16
      },
      min: 0,
      max: 200,
      title: {
         text: 'Speed'
      }
   };     

   var plotOptions = {
      solidgauge: {
         dataLabels: {
            y: 5,
            borderWidth: 0,
            useHTML: true
         }
      }
   };

   var credits = {
      enabled: false
   };

   var series = [{
      name: 'Speed',
      data: [initialValue],
      dataLabels: {
         format: '<div style="text-align:center"><span style="font-size:25px;color:' +
         ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
         '<span style="font-size:12px;color:silver">km/h</span></div>'
      },
      tooltip: {
         valueSuffix: ' km/h'
      }
   }];

   var json = {};   
   json.chart = chart; 
   json.title = title;       
   json.pane = pane; 
   json.tooltip = tooltip; 
   json.yAxis = yAxis; 
   json.credits = credits; 
   json.series = series;     
   $('#container-speed').highcharts(json);   


       var socket = new SockJS('/stomp');

       var stompClient = Stomp.over(socket);

       var message;

       stompClient.connect({ }, function(frame) {
           // subscribe to the /topic/message endpoint
           stompClient.subscribe("/topic/message", function(data) {
               //alert("new value from server = "+data.body);
               message = data.body;
               newValue = JSON.stringify(data.body);
               console.log("data = "+newValue);
           });
       });     


 var chartFunction = function() {
      // Speed
      var chart = $('#container-speed').highcharts();
      var point;
      var newVal;
      var inc;

      if (chart) {
          point = chart.series[0].points[0];
          newVal = message;  
          point.update(newVal);
          console.log("newVal = "+ newVal);       
      } 

   };    

  setInterval(chartFunction, 2000);


});
//]]>
</script>
</body>
</html>

使用stomp更新Highchart简易量规

0 个答案: