Question

这是我的Highchart代码：

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
        },

});

对于highchart的xAxis类别属性，我有58天的数据。第一天数据与第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

Answer 2

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: ''
        },
         tickInterval:(maxValue/10),
            min: 0,
            max: maxValue,
    },
    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
        },

});

在这里我添加了： tickInterval：（maxValue / 10），最小值：0， max：maxValue，

这意味着您需要先获得最大值，然后取最接近的值除以10并使用，希望对您有所帮助

无论图表中的x轴类别是什么，Highchart x轴在特定日期后都会显示标签

2 个答案: