2013-04-04 10 views
6

highcharts.jsを使用して棒グラフを作成しました。私はy軸としてデバイス名を追加し、x軸のバイト数でデータパケットを追加しました。棒グラフのバーにデバイスの接触時間を追加するにはどうすればいいですか?私はarray.iでデバイスの接触時間を求めています。棒グラフで?ハイチャートの棒グラフに値を印刷しますか?

答えて

9

これは可能ですdataLabelsを有効にしてカスタマイズしますまた、特定の方法であなたのデータをフォーマットする必要があります。

$(function() { 
$('#container').highcharts({ 
    chart: { type:'bar', 
    }, 
    xAxis: { 
     categories: ['Device 1', 'Device 2'] 
    }, 

    plotOptions: { 
     series: { 
      dataLabels: { 
       enabled: true, 
       formatter:function() { 
        return this.point.t; 
       } 
      } 
     } 
    }, 

    series: [{ 
     data: [{y:29.9,t:"12:45"}, {y:71.5,t:"14:45"}]   
    }] 
}); 
}); 

http://jsfiddle.net/NPSEf/

この例のデータは、あなたがバーに表示する時間が含まれている「T」定義された追加のフィールドがあります。 dataLabelフォーマッタ関数では、this.point.tを使用して 't'を含む各点のすべてのデータを参照できます。

+0

あなたの答えは大変ありがとうございます。しかし、各バーのこの修正サイズがバーの最後に表示される前に、この変更以来、それらはなくなり、時間値だけが表示されます。私は両方の値、それぞれのバーの "接触時間値"と "バーの値"の端を表示します。 – helplakmal

+0

フォーマッタ機能を変更するだけです。 return this.point.y + "" + this.point.t – SteveP

+0

あなたのhelp.thanksに本当に感謝します。 – helplakmal

3

あなたのコードを共有してください...

はあなたのhighchartsから

コールをopendata()関数系列データ

series: [{ 
    name: 'BarName', 
    data: openData() 

}] 

をopendata()関数 ...これを探していませんでした

function openData() { 
var fromDate =$('#startDate').val(); 
var toDate = $('#expireDate').val(); 

if(fromDate == '' || toDate == ''){ 
    // return false; 
} 

var data = 'fromDate='+fromDate+'&toDate='+toDate; 
$.ajax({ 
    url: 'apAppOpenChart.php', 
    data: data, 
    success: function(data) { 
     var chartData=[]; 
     var retdata = jQuery.parseJSON(data); 
     var length =retdata.length; 

      for(var i=0; i<length; i++){ 
       var jsDate = new Date(retdata[i][0]*1000); 
       var datejs = jsDate.getFullYear()+','+jsDate.getMonth()+','+jsDate.getDate(); 

      } 
      chart.series[0].setData(retdata); 
      chart.redraw(); 
     }, 
    cache: false 
}); 
} 
関連する問題