1. 程式人生 > >Highcharts 寬度溢出容器

Highcharts 寬度溢出容器

mage 設置 分享圖片 all var ever eth chart Matter

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 寬度溢出容器