带有自定义间隔标签的Highchart

Highchart with label in custom intervals

本文关键字：标签 Highchart 自定义      更新时间：2023-09-26

我有一个Highchart条形图（列类型），它将显示每个日期的数据。现在它正在通过AJAX和日期范围获取值可以选择。由于大小限制，如果选择的日期范围超过10天，我需要以5天为间隔显示日期标签。这就是需要显示的所有条形图，但如果日期范围超过10天，则标签的间隔应为5天。如果是10天或更低，则应显示所有日期。

我的图形配置如下：

var chart = new Highcharts.Chart({
                credits: {
                    enabled: false
                },
                legend: {
                    align: 'right',
                    verticalAlign: 'top',
                    layout: 'vertical',
                    x: 20,
                    y: 10
                },
                chart: {
                    renderTo: 'id_name',
                    type: 'column'
                },
                xAxis: {
                    categories: dates,
                    crosshairs: true
                },
                yAxis: {
                    title: {
                        text: 'Y Axis Title'
                    }
                },
                colors: ['#1A7BB9', '#18A689', '#21B9BB', '#F7A54A', '#EC4758'],
                title: {
                    text: 'My title goes here'
                },
                subtitle: {
                    text: 'my subtitle goes here'
                },
                series: PHP formatted data goes here
  });

我不确定间隔（应该每五个标签显示一次？或者你想比较时间范围来确定这一点？），但通常有两种解决方案：

  • 更简单：默认情况下禁用dataLabels（series.dataLabels.enabled = false），但为特定点启用，例如：

    series: [{
   data: [{ 
     x: timestamp_1,
     y: timestamp_1,
     dataLabels: {
       enabled: true
     }
   }, [timestamp_2, value_2], [timestamp_3, value_3], ... , {
     x: timestamp_N,
     y: timestamp_N,
     dataLabels: {
       enabled: true
     }
   }]
}]

  • 较难的一个：包装drawDataLabels方法，并删除不必要的标签：

    (function (H) {
  H.wrap(H.seriesTypes.column.prototype, 'drawDataLabels', function (p) {
    var step = H.pick(this.options.dataLabels.step, 0),
        iterator = 0;
    p.call(this);
    if(step) {
        H.each(this.points, function (point) {
            if (point.dataLabel) {
                if (iterator % step !== 0) {
                    point.dataLabel = point.dataLabel.destroy();
                }
                iterator ++;
            }
        });
    }
  });
})(Highcharts)

jsFiddle用于第二个解决方案：http://jsfiddle.net/gL2kw73b/2/

相关文章：