Highcharts 寬度溢出容器

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]
    }]
    
})        

 

 正常了：