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

本文介绍了一个使用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>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值