关于Highcharts的x轴密密麻麻的时间格式显示问题解决方法

本文链接：https://blog.youkuaiyun.com/ArvinStudy/article/details/9127567

本文介绍了一个使用Highcharts实现的基本折线图配置方法，详细解释了如何设置x轴的显示格式，包括日期类别、标签旋转角度及显示间隔等。同时展示了如何通过JavaScript动态创建图表，并设置了系列数据和图例展示方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

把X轴改为这样 
xAxis: {
categories:obj.tdate,   //x轴显示格式['0000-00-00','0000-00-00','0000-00-00','0000-00-00','4','5']
labels: {step:2,rotation: -25, align: 'right', style: { font: 'normal 13px Verdana, sans-serif'}}
},

例子

function chart_line_basic(renderTo, categories, series, legendEnabled) {
    this.renderTo = renderTo;
    this.series = series;
    this.categories = categories;
    this.legendEnabled = legendEnabled;
    this.step=0;
    this.rotation=0;
    if(categories.length>4)
    {
    this.step=2;
    this.rotation=25;
    }
}
chart_line_basic.prototype.formatterTooltip = function () { }
chart_line_basic.prototype.showChart = function () {
    var chart;
    chart = new Highcharts.Chart({
        chart: {
            renderTo: this.renderTo,
            type: 'line',
//            marginRight: 130,
//            marginBottom: 25
        },
        title: {
            text: '',
            x: -20 //center
        },
        subtitle: {
            text: '',
            x: -20
        },
        xAxis: {
            labels:{
            step:this.step,
            rotation: this.rotation
            },
            categories: this.categories
        },
        yAxis: {
            title: {
                text: ''
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: this.formatterTooltip
        },
        legend: {
            floating: true,
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 20,
            borderWidth: 0,
            enabled: this.legendEnabled
        },
        series: this.series
    });
};

    <script type="text/javascript">
        $(function () {
            var renderTo = "container_1";
            //如果没有可以用NULL表示：空 ，而0表示从0开始
            var series = [{ name: 'Tokyo', data: [7.0, 6.9, null, 14.5, 18.2, 21.5, 25.2, 26.5]}];
            var categories = ['一周', '二周', '三周', '四周', '五周', '六周', '七周', '八周'];
            var legendEnabled = true;
            var _line_basic = new chart_line_basic(renderTo, categories, series, legendEnabled);
            _line_basic.formatterTooltip = function () { return this.x + ': ' + this.y + '%'; }
            _line_basic.showChart();

        });
    </script>

<div id="container_1" style="min-width: 400px; height: 400px; margin: 0 auto"></div>