带有自定义间隔标签的 Highchart答案

【问题标题】：Highchart with label in custom intervals带有自定义间隔标签的 Highchart
【发布时间】：2015-11-10 18:36:13
【问题描述】：

我有一个 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
  });

【问题讨论】：

标签： javascript jquery highcharts

【解决方案1】：

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

更简单：默认禁用 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/

【讨论】：