您的位置:首页 > 其它

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

2017-02-13 11:34 441 查看
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

         });

    }

    

       

    }
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐