9

我使用highcharts.js. 我将设备名称添加为 y 轴,并将数据包添加为 x 轴的字节。如何在条形图的条形图上添加设备接触时间。我在数组中有一个设备接触时间。我想要的是一种打印方式,即时间值在条形图上?

4

2 回答 2

11

您可以通过启用 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'。

于 2013-04-04T08:35:58.340 回答
4

请分享您的代码...

你是不是在找这个...

从您的 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
 });
}
于 2013-04-04T06:04:45.507 回答