javascript - 当范围很大时，Highcharts x 轴看不到

Question

我的 x 轴的范围为一年，间隔一小时。我目前使用的是 variwide，因此每个条形的宽度将取决于小时数。这里的问题是，如果范围太大，则看不到条形。是否可以做到无论范围有多大，都可以看到x轴？提前致谢。

下面是24小时范围的图表图片:

https://jsfiddle.net/adamloh/bo9s8u4q/6/ ( mock )

这是具有 1 年范围的图表图片。我启用了几乎看不到的十字准线(蓝色圆圈):

https://jsfiddle.net/adamloh/5d28uq6f/2/ ( mock )

下面是我的 highcharts 代码:

Highcharts.chart('rulecontainer', {
    chart: {
        zoomType: 'x'
    },
    tooltip: {
        enabled: false
    },
    title: {
        text: '',
        style: {
            display: 'none'
        }
    },
    xAxis: {
        events: {
            setExtremes: syncExtremes
        },
        type: 'datetime',
        min: data.minDate,
        max: data.maxDate,
        crosshair: true
    },
    yAxis: [{
        min: data.yMin,
        max: 1,
        title: {
            text: 'kw/h'
        }
    }],
    series: [{
        name: data.ruleName,
        type: 'variwide',
        data: [{
            x: data.dateOccured,
            y: data.yValue,
            z: data.duration
        }],
        borderColor: 'rgba(0, 0, 255, 0.2)',
        color: 'rgba(0, 0, 255, 0.2)',
        pointRange: 0
    }],
    plotOptions: {
        series: {
            minPointLength: 10
        },
        area: {
            fillOpacity: 0.1,
            lineWidth: 1,
            states: {
                hover: {
                    lineWidth: 1
                }
            },
            threshold: null
        }
    }
});

Answer 1

您需要启用startOnTick和endOnTick选项:

xAxis: {
    ...,
    startOnTick: true,
    endOnTick: true
}

<小时/>

现场演示: https://jsfiddle.net/BlackLabel/pq0yLsj2/

API引用:

https://api.highcharts.com/highstock/xAxis.startOnTick

https://api.highcharts.com/highstock/xAxis.endOnTick