如何在高圖表中以時間間隔更新柱的系列值？

Question

我用High chart編寫了條形圖代碼。 對於靜態數據，這很好用。 現在，我想知道如何以5秒的間隔更新一系列數據。 我正在使用條形圖。 我也想知道如何在欄上添加標簽值。

這是HTML條碼：

<html>
<head>
<title>Highcharts Tutorial</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> 
</head>
<body>
<div id="container" style="width: 450px; height: 360px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {  
   var chart = {
      type: 'bar'
   };
   var title = {
      text: 'my Statistics'   
   };
   var subtitle = {
      text: 'Source: my data'  
   };
   var xAxis = {
      lineColor: 'black',
      categories: ['User1', 'user2'],
      title: {
         text: null
      }
   };
   var yAxis = {
      gridLineDashStyle: 'shortdash',
      min: 0,
      max: 140,
      tickInterval: 20,
      title: {
         text: 'Download ',
         align: 'high'
      },
      labels: {
         overflow: 'justify'
      }
   };
   var tooltip = {
      valueSuffix: ' MB'
   };
   var plotOptions = {
      bar: {
         dataLabels: {
            enabled: true
         },
      },
       series: {
           pointPadding: 0,
            pointWidth:40
        }
   };
   var legend = {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'top',
      x: 12,
      y: 10,
      floating: true,
      borderWidth: 1,
      backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
      shadow: true
   };
   var credits = {
      enabled: false
   };

   var series= [
        {
         name: 'New',
         data: [34.4,31]
        }, 
        {
            name: 'old',
            data: [110, 100]
        }
    ];     

   var json = {};   
   json.chart = chart; 
   json.title = title;   
   json.subtitle = subtitle; 
   json.tooltip = tooltip;
   json.xAxis = xAxis;
   json.yAxis = yAxis;  
   json.series = series;
   json.plotOptions = plotOptions;
   json.legend = legend;
   json.credits = credits;
   $('#container').highcharts(json);

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

和輸出看起來像

如何使用一些隨機值動態更新序列值？ 此條形圖代碼可能嗎？

任何有用的鏈接？

現在我想在標簽上添加34.4以上。 不在標簽前面。 可能嗎？
有什么建議嗎？

Answer 1

有些方法可以動態更新序列/數據/點。 對於系列，它是series.update（）。

  chart.series[0].update({
    data: [20, 2]
  });

要放置標簽，您可以使用x / y屬性在圖表上移動它，也可以嘗試使用align，verticalAlign，內部屬性。 您可以將特定標簽選項設置為單個點。

data: [{
        y: 20,
      dataLabels: {
        enabled: true,
        inside: true,
            y: -30
      }}, 2]

示例： https ： //jsfiddle.net/9o64ybo4/3/

如何在高圖表中以時間間隔更新柱的系列值？

問題描述

1 個解決方案

解決方案1
0 2016-10-24 10:36:06

如何在高圖表中以時間間隔更新柱的系列值？

問題描述

1 個解決方案

解決方案1 0 2016-10-24 10:36:06

解決方案1
0 2016-10-24 10:36:06