Highcharts 寬度溢出容器
阿新 • • 發佈:2018-08-22
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 寬度溢出容器