2016-10-23 15 views
0

私はハイチャートの棒グラフのコードを書きました。これは、静的データに対しては問題なく動作しています。今、私は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> 

と出力はどのように私はいくつかのランダムな値 で動的に系列値を更新することができ

result

  • のように見ていますか?この棒グラフコードで可能ですか?

便利なリンクはありますか?

  • ここで、ラベルに34.4を追加します。 ラベルの前にはありません。出来ますか ?

    提案がありますか?

答えて

0

シリーズ/データ/ポイントを動的に更新する方法があります。シリーズの場合は、series.update()です。

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

また、あなたは特性内部に、ALIGNとverticalAlignを試すことができ、グラフの周りに移動させるX/Yプロパティを使用することができるラベルを配置します。単一のポイントに特定のラベルオプションを設定できます。

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

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

関連する問題