Question

我最近将highcharts v2.3.3升级到4.0.3，并发现我的xAxis在此之后无法正确显示。

我有一个3年的月度图表：JSFiddle example

缩放到细节级别，然后重置缩放后，所选区域中的xAxis标签消失： Screen Capture After Reset Zoom

有什么方法可以解决这个问题吗？非常感谢！

我发现maxStaggerLines导致了这个问题，但我不想将它分成2行。我该如何解决这个问题？

我还发现如果我在另一个图表中设置maxStaggerLines: 1，某些标签就会消失。我可以关闭自动交错线/自动检测标签重叠功能吗？

我的图表代码：

$(function () {
var startYear = '2012';
var dataSet = [];
for (var i = 0; i < 36; i++)
    dataSet.push(15);
var series = [];
series.push({data: dataSet});

var xCategoriesMonth = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

var xCategoriesYear = [];
for (var i = parseInt(startYear) ; i < (parseInt(startYear) + 3) ; i++)
    for (var x = 0; x < 12 ; x++)
        xCategoriesYear.push(i);

$('#container').highcharts({
    chart: {
      zoomType: 'x',
      type: 'line',
      height: 380,
    },
    xAxis: {
        type: "category",
        labels: {
            formatter: function () {
                var ex = this.axis.getExtremes();

                if ((ex.max - ex.min) > 12) {
                    if (this.value % 3 == 0) {
                        if (xCategoriesMonth[this.value] == "Jan")
                            return xCategoriesMonth[this.value] + '<br>' + xCategoriesYear[this.value];
                        else
                            return xCategoriesMonth[this.value];
                    }
                }
                else {
                    if (this.value % 3 == 0)
                        return xCategoriesMonth[this.value] + '<br>' + xCategoriesYear[this.value];
                    else
                        return xCategoriesMonth[this.value];
                }
            },
            maxStaggerLines: 1,
        },
        tickPixelInterval: $('#container').width() / 36,
        title: {
            text: 'testing',
            offset: 50
        },
        showLastLabel: false, 
        startOnTick: false,
        endOnTick: true,
        minPadding: 0,
        maxPadding: 0,

    },

    yAxis: {
        lineWidth: 1,
    },

    plotOptions: {
        series: {
            allowPointSelect: true,
            lineWidth: 1,
            connectNulls: true,
        },

    },
    series: series,
});
});

Answer 1

我有类似的问题。对我来说，解决方案是添加tickInterval：1选项。看看这张票 https://github.com/highslide-software/highcharts.com/issues/4399

重置缩放后无法显示高图表xAxis标签

1 个答案: