Question

我用高图表为条形图编写了代码。这适用于静态数据。现在我想知道如何以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，inside属性。您可以将特定标签选项设置为单个点。

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

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

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

1 个答案: