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

把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>


Highcharts提供了自带的双X展示方式,但是效果可能不太理想,调整起来也会比较麻烦。不过,你可以使用Highcharts的分组插件grouped-categories.js来实现想要的效果。你可以稍作修改,将你的代码中的xAxis部分替换为以下代码来实现x的分组: xAxis: { categories: \[{ name: '2011年', categories: \['一', '二', '三'\] }, { name: '2012年', categories: \['一', '二', '三'\] }, { name: '2013年', categories: \['一', '二', '三'\] }\] } 这样,你的x就会按照年份进行分组显示。希望对你有帮助!\[1\] \[2\] #### 引用[.reference_title] - *1* [hightChart 实现x分组](https://blog.csdn.net/yuanfanlove/article/details/121969552)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [Highcharts:X分组堆叠图](https://blog.csdn.net/yueritian/article/details/41309137)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [Highcharts实现X分组分类](https://blog.csdn.net/qq_40585267/article/details/104896165)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值