2013-04-04 1 views
6

Я создал гистограмму, используя highcharts.js. Я добавил имя устройства в виде оси y и пакетов данных в байтах для оси x. Как добавить время контакта устройства на полосах гистограммы. У меня есть время контакта с устройством в array.i want - это способ печати, это значение времени на гистограмме?распечатать значение на диаграмме диаграммы на высоком графике?

ответ

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/

Данные, приведенные в данном примере, имеет дополнительное поле, определенное «т», который содержит время, которое вы хотите показать в строке. В функции форматирования dataLabel вы можете ссылаться на все данные в каждой точке, включая «t», используя this.point.t.

+0

Большое спасибо за ваш ответ. Но перед этим размером модификации каждого бара отображается конец бара. но с этой модификацией они исчезают и отображаются только значения времени. я хочу отображать оба значения, «значение времени контакта» и «значение бар» конца каждого бара. – helplakmal

+0

Просто измените вашу функцию форматирования, например. return this.point.y + "" + this.point.t – SteveP

+0

Я очень ценю вашу помощь. Спасибо. – helplakmal

3

Пожалуйста, поделитесь своим кодом ...

ли вы ищете для этого ...

функции

вызова openData() из ваших Highcharts данных серии

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 
}); 
}