Question

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

Answer 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/

自定义时间间隔内标签的高清图

1 个答案: