如何在高图表中以时间间隔更新柱的系列值？

Question

I wrote a code for bar chart with High chart . 我用High chart编写了条形图代码。 This is working fine for static data . 对于静态数据，这很好用。 Now i want to know how can i update the series of data with a 5 second interval . 现在，我想知道如何以5秒的间隔更新一系列数据。 I am using bar chart . 我正在使用条形图。 Also i want to know how can i add a label value on the bar . 我也想知道如何在栏上添加标签值。

This is bar HTML code : 这是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>

and the output is looking like 和输出看起来像

How can i update the series value dynamically with some random values ? 如何使用一些随机值动态更新序列值？ Is it possible with this bar chart code ? 此条形图代码可能吗？

Any useful links ? 任何有用的链接？

Now i want to add 34.4 above on the label . 现在我想在标签上添加34.4以上。 not in-front of the label. 不在标签前面。 Is it possible ? 可能吗？
Any suggestion ? 有什么建议吗？

Answer 1

There are methods which will update series/data/point dynamically. 有些方法可以动态更新序列/数据/点。 For a series it is series.update(). 对于系列，它是series.update（）。

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

To position a label you can use x/y properties to move it around the chart, also you can experiment with align, verticalAlign, inside properties. 要放置标签，您可以使用x / y属性在图表上移动它，也可以尝试使用align，verticalAlign，内部属性。 You can set a specific label option to a single point. 您可以将特定标签选项设置为单个点。

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

Example: https://jsfiddle.net/9o64ybo4/3/ 示例： 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