码迷,mamicode.com
首页 > 其他好文 > 详细

Highcharts 宽度溢出容器

时间:2018-08-22 13:59:53      阅读:1227      评论:0      收藏:0      [点我收藏+]

标签:ext   abs   tac   number   use   inf   容器   code   class   

1,设置Highcharts的动态宽高。

  获取Highcharts图表需要的宽高值,给到Highcharts图表的div容器。

  如:var hpvCountSendDateHei = $(".hpvCountSendDate_Box").height()+110;  //110 矫正值 

    var hpvCountSendDateWidth = $(".hpvCountSendDate_Box").width();
    $(".attrVlaueThree").height(hpvCountSendDateHei-110);

2,宽度为400,Highcharts绘制出来的图为600,溢出div容器外

技术分享图片

 

解决方案:给Highcharts一个width值。

var hpvCountSendDateWidthChart = $(".hpvCountSendDate_Box").width();//获取right侧width(和柱图一样的元素width)
$("#"+batchIdS_N).highcharts({
    chart: {
        type: ‘bar‘,
        width:hpvCountSendDateWidthChart    // 设置Highcharts的width
    },
    title: {
    text: ‘‘
    },
    subtitle: {
    useHTML: true,
    text: ‘‘
    },
    colors:[‘#B6C6FA‘,‘#92F9E4‘], // 柱图颜色
    credits: { 
          enabled: false //不显示LOGO 
     },

    xAxis: [{
    categories: [1,2,3,4,512,43,65,89],
    reversed: false,
    labels: {
        step: 1
    }
    }],
   yAxis: {
    title: {
        text: "(实验室个数)",
        align:"high",
    },
    allowDecimals:false,
    labels: {
        formatter: function () {
            return (Math.abs(this.value) / 1) ;
        }
    },
    min: -100,
    max: 100
    },
    legend: {
    align: ‘center‘,
    verticalAlign: ‘top‘,
    y: 0,
    x:25,
    floating: false,
    borderWidth: 0
    },
    plotOptions: {
    series: {
        stacking: ‘normal‘
    },
    column:{
        pointWidth:10
    }
    },
    tooltip: {
    formatter: function () {
        return ‘<b>‘ + this.series.name + ‘, 型别名称 ‘ + this.point.category + ‘</b><br/>‘ +
                    ‘实验室个数: ‘ + Highcharts.numberFormat(Math.abs(this.point.y), 0);
    }
    },
    series: [{
    name: ‘阳性‘,
    data: [90,422,43,45,675,45]
    }, {
    name: ‘阴性‘,
    data: [23,434,656,23,648,89]
    }]
    
})        

 

 正常了:

技术分享图片

 

Highcharts 宽度溢出容器

标签:ext   abs   tac   number   use   inf   容器   code   class   

原文地址:https://www.cnblogs.com/Han39/p/9517016.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!