javascript - Highchart x 轴在特定日期后显示标签，无论 x 轴类别中有什么

Question

这是我的 Highcharts 代码:

Highcharts.setOptions({
    time: {
        useUTC: false
    }
});

$('#container-chart').highcharts({
    chart: {
        type: 'line',
        alignTicks: false,
    },
    title: {
        text: "Title 1",
    },
    tooltip: {
        formatter: function() {
            return Highcharts.dateFormat('%b %e, %Y',new Date(this.x))+ '<br/>' + this.y;
        }
    },
    xAxis: {
        categories: [1391122800000,1393542000000,1396216800000,1398808800000,1401487200000,1404079200000,1406757600000,1409436000000,1412028000000,1414710000000,1417302000000,1419980400000,1422658800000,1425078000000,1427752800000,1430344800000,1433023200000,1435615200000,1438293600000,1440972000000,1443564000000,1446246000000,1448838000000,1451516400000,1454194800000,1456700400000,1459375200000,1461967200000,1464645600000,1467237600000,1469916000000,1472594400000,1475186400000,1477868400000,1480460400000,1483138800000,1485817200000,1488236400000,1490911200000,1493503200000,1496181600000,1498773600000,1501452000000,1504130400000,1506722400000,1509404400000,1511996400000,1514674800000,1517353200000,1519772400000,1522447200000,1525039200000,1527717600000,1530309600000,1532988000000,1535666400000,1538258400000,1540940400000],
        // tickInterval: (24 * 3600 * 1000 * 173),
        labels: {
            formatter: function () { 
                return Highcharts.dateFormat("%b %y", this.value);
            },
        }
    },
    yAxis: {
        title: { text: ''
        },
    },
    legend: {
        enable: true,
    },
        plotOptions: {
            series: {
                marker: {
                    enabled: false
                },
                dataLabels: {
                    enabled: false,
                    allowOverlap: true,
                },
                lineWidth: 2,
                states: {
                    hover: {
                        lineWidth: 3
                    }
                },
                threshold: null
            }
        },
        series: [{
            data: [0.57,0.41,0.51,0.35,0.16,0.16,0.05,0.19,0.27,0.57,0.45,0.59,0.49,0.77,0.56,0.25,0.3,0.28,0.27,0.33,0.45,0.62,0.62,0.46,0.46,0.45,0.68,0.18,0.22,0.28,0.29,0.41,0.34,0.59,0.67,0.69,0.65,0.57,0.73,-0.01,0.32,0.27,0.47,0.47,0.57,0.75,0.7,0.6,0.71,0.88,0.79,-0.11,0.22,0.15,0.07,0.09,0.09,0.09],
        }],
        exporting: {
            sourceWidth: 1500
        },

});

我有 58 天的数据用于 highchart 的 xAxis 类别属性。第 1 天数据与第 58 天数据的日期差异为 1734，即总天数为 1734 天。现在，比方说，我只想在 x 轴上显示 10 个标签，距离相等，包括第一个和最后一个数据，这意味着标签间隔为 173 天。无论 x 轴类别中存在什么日期间隔，我如何才能实现此标签间隔？

有什么帮助吗？

Answer 1

您可以使用 tickPositioner 函数，但您应该将时间戳用作 x 值而不是类别:

xAxis: {
    tickPositioner: function() {
        var positions = [],
            interval = 24 * 3600 * 1000 * 173;

        for (var i = this.dataMin; i <= this.dataMax; i += interval) {
            positions.push(i);
        }

        return positions;
    },
    labels: {
        formatter: function() {
            return Highcharts.dateFormat("%b %y", this.value);
        },
    }
}

现场演示:http://jsfiddle.net/BlackLabel/npq3x2bc/

API 引用:https://api.highcharts.com/highcharts/xAxis.tickPositioner