使用Highcharts.js在x轴上显示日期

Question

我正在使用highcharts.js构建条形图。 x轴是日期数组，而y轴是0-100的数字数组。我想在X轴上显示日期，但只在有新日期时显示刻度。如果您查看此fiddle，您可以看到当前的情节以及日期看起来如何糟糕。看看这个fiddle以及它如何以优雅的方式显示日期。基本上我只想在绘制许多数据点时在x轴上显示几个刻度。

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Monthly Average Rainfall'
        },
        subtitle: {
            text: 'Source: WorldClimate.com'
        },
        xAxis: {
            categories: dates ,
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Rainfall (mm)'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: 'Tokyo',
            data: ticks

        }]
    });

Answer 1

将minTickInterval添加到xAxis设置：

xAxis: {
            categories: dates ,
            crosshair: true,
            minTickInterval: 24
        }