在高图条形图上打印一个值

print a value on highcharts bar graph?

本文关键字：一个 高图 条形图 打印      更新时间：2023-09-26

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

您可以通过启用datalabel并自定义它们来实现这一点。您还需要以特定的方式格式化数据:

$(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'。

请分享你的代码…

你在找这个吗?

从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
 });
}
相关文章：