Highcharts图表插件X轴数据过多,ie8下面文字竖排显示

function Bind_Chart(obj_time, arr_data_list) {
    //alert(obj_time.length);
    var n_l=obj_time.length;
    var userAgent = navigator.userAgent;
    var is_ie8=0;
    if(userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1)
    {
       var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
            reIE.test(userAgent);
            var fIEVersion = parseFloat(RegExp["$1"]);
            //alert(fIEVersion);
            if( parseInt(fIEVersion)<=8&&n_l>7)
            {
            is_ie8=1;
            }
    }
    // alert(is_ie8);
        if(is_ie8==1)  
   
    var chart_02 = Highcharts.chart('new_chart', {
             chart: {
                 type: 'areaspline'
             },
             title: {
                 text: ''
             },
             legend: {
                 align: 'right',
                 verticalAlign: 'top',
                 x: 0,
                 y: 0,
                 floating: true,
                 borderWidth: 1,
                 symbolRadius: 2,
                 symbolWidth: 10,
                 backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
                 rtl: false
             },
             xAxis: {
                 categories: obj_time,
                 labels: { 
                     rotation: 0, 
                     style: { 
                         fontSize: '12px', 
                         fontFamily: 'Verdana, sans-serif',
                         writingMode:'tb-rl'    //文字竖排样式
                     }
                 },
                 plotBands: [{ // visualize the weekend
                     from: 4.5,
                     to: 6.5,
                     color: 'rgba(68, 170, 213, .2)'
                 }]
             },
             yAxis: {
                 title: {
                     text: ''
                 }
             },
             tooltip: {
                 shared: true,
                 valueSuffix: ' 个'
             },
             credits: {
                 enabled: false
             },
             plotOptions: {
                 areaspline: {
                     fillOpacity: 0.5
                 },
                 series: {
                     marker: {
                         fillColor: '#ffffff',
                         lineWidth: 2,
                         lineColor: null // inherit from series
                     }
                 }
             },
             series: arr_data_list
         });
   
    else
    {
    var chart_02 = Highcharts.chart('new_chart', {
             chart: {
                 type: 'areaspline'
             },
             title: {
                 text: ''
             },
             legend: {
                 align: 'right',
                 verticalAlign: 'top',
                 x: 0,
                 y: 0,
                 floating: true,
                 borderWidth: 1,
                 symbolRadius: 2,
                 symbolWidth: 10,
                 backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
                 rtl: false
             },
             xAxis: {
                 categories: obj_time,
                 plotBands: [{ // visualize the weekend
                     from: 4.5,
                     to: 6.5,
                     color: 'rgba(68, 170, 213, .2)'
                 }]
             },
             yAxis: {
                 title: {
                     text: ''
                 }
             },
             tooltip: {
                 shared: true,
                 valueSuffix: ' 个'
             },
             credits: {
                 enabled: false
             },
             plotOptions: {
                 areaspline: {
                     fillOpacity: 0.5
                 },
                 series: {
                     marker: {
                         fillColor: '#ffffff',
                         lineWidth: 2,
                         lineColor: null // inherit from series
                     }
                 }
             },
             series: arr_data_list
         });
    }
    
       
    }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值