目前我使用 Coldfusion 进行 highCharts。我需要在表格中显示 3 个具有相同列大小的图表，并且图表必须占据已设置的 div。我设法显示所有图表，但列大小不一样，并且图表没有占据列。下面是我的图像和代码的打印屏幕。
<cfscript>
categories= ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'] ;
series= [{
'type': 'column',
'name': 'Last Month',
'data': ['80','136','220','314','371','424','522','611','679','730','806','876','906','1003','1044','1084','1120','1147','1228','1248','1259','1277','1278','1306','1318','1365','1413','1513','1522','1614']
}, {
'type': 'column',
'name': 'MTD',
'data': ['70','97','158','207','216','254','264','266','340','406','442','532','626','683','688','771','827','881','900','934','995','1074','1081','1091','1174','1236','1244','1316','1409','1486' ]
}, {
'type': 'spline',
'name': 'Target',
'data': ['84','148','162','200','212','282','341','358','452','539','632','661','687','784','793','822','876','937','975','1035','1106','1159','1212','1239','1294','1298','1305','1340','1401','1479'],
'marker': {
'enabled': false
}
}];
</cfscript>
<cfscript>
categories1= ['Overall','Appt Booking', 'Reception', 'Service Advisor', 'Completion Delivery Process'] ;
series1 = [{
'name': 'Last Month',
'data': [3.775,3.5, 3.9, 4, 3.7],
'pointPlacement': 'on'
}, {
'name': 'MTD',
'data': [ 3.775, 3.7, 3.5, 3.9, 4],
'pointPlacement': 'on'
}, {
'name': 'Target',
'data': [3.725, 3.8,3.5, 3.7, 3.9],
'pointPlacement': 'on'
}];
</cfscript>
<cfscript>
categories2= ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'] ;
series2= [{
'type': 'spline',
'name':'WIP Cases',
'data': [5,13,13,12,13,10,9,7,6,14,12,9,7,11,11,5,12,11,8,6,15,12,11,11,5,5,14,11,12,15,9],
'marker': {
'enabled': false
}
}];
</cfscript>
<cfscript>
categories3= ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'] ;
series3= [{
'type': 'spline',
'name':'WIP Cases',
'data': [5,13,13,12,13,10,9,7,6,14,12,9,7,11,11,5,12,11,8,6,15,12,11,11,5,5,14,11,12,15,9],
'marker': {
'enabled': false
}
}];
</cfscript>
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
title: {
text: 'Combination chart',
x: -1000
},
exporting: { enabled: false },
yAxis: {
title: {
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
xAxis: {
title: {
},
categories:<cfoutput>#serializeJson(categories)#</cfoutput>,
tickInterval:29 },
marker: {
enabled: false
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.2f}</b><br/>'
},
legend: {
itemStyle: {
},
},
series:<cfoutput>#serializeJson(series)#</cfoutput>
});
});
</script>
<script type="text/javascript">
$(function () {
var categoryLinks = {
'Overall': 'http://127.0.0.1:8500/highCharts/Spiderweb.cfm?id=1234',
'Appt Booking': 'http://127.0.0.1:8500/highCharts/line.cfm',
'Service Advisor': 'http://127.0.0.1:8500/highCharts/combine.cfm'
};
var chart = new Highcharts.Chart({
chart: {
polar: true,
type: 'line',
renderTo: 'container1'
},
title: {
text: 'Budget vs spending',
x: -1000
},
pane: {
size: '100%'
},
xAxis: {
categories: <cfoutput>#serializeJson(categories1)#</cfoutput>,
tickmarkPlacement: 'on',
lineWidth: 0,
labels: {
formatter: function () {
return '<a href="' + categoryLinks[this.value] + '">' +
this.value + '</a>';
},
style: {
fontSize: '8px',
}
}
},
yAxis: [{
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 3,
endOnTick: true,
showLastLabel: true,
tickPositions: [3,3.5, 4, 4.5, 5],
}],
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
alert('Category: ' + this.category + ', value: ' + this.y);
}
}
}
}
},
legend: {
verticalAlign: 'top',
y: -100,
x :-100,
layout: 'vertical'
},
exporting: { enabled: false },
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.2f}</b><br/>'
},
series: <cfoutput>#serializeJson(series1)#</cfoutput>
});
});
</script>
<script type="text/javascript">
$(function () {
var chart = new Highcharts.Chart({
chart: {
type: 'line',
renderTo: 'container3'
},
title: {
text: 'Budget vs spending',
x: -1000
},
yAxis: {
title: {
text: 'WIP Aging',
},
showLastLabel: true,
tickPositions: [4, 6, 8, 10,12,14,16],
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
xAxis: {
title: {
text: 'Date'
},
categories:<cfoutput>#serializeJson(categories2)#</cfoutput>,
tickInterval:30 },
marker: {
enabled: false
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.2f}</b><br/>'
},
exporting: { enabled: false },
legend: {
itemStyle: {
fontSize:'5px'
},
},
series:<cfoutput>#serializeJson(series2)#</cfoutput>
});
});
</script>
</script>
<script type="text/javascript">
$(function () {
var chart = new Highcharts.Chart({
chart: {
type: 'line',
renderTo: 'container4'
},
title: {
text: 'Budget vs spending',
x: -1000
},
yAxis: {
title: {
text: 'WIP Aging',
},
showLastLabel: true,
tickPositions: [4, 6, 8, 10,12,14,16],
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
xAxis: {
title: {
text: 'Date'
},
categories:<cfoutput>#serializeJson(categories3)#</cfoutput>,
tickInterval:30 },
marker: {
enabled: false
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.2f}</b><br/>'
},
exporting: { enabled: false },
legend: {
itemStyle: {
fontSize:'5px'
},
},
series:<cfoutput>#serializeJson(series3)#</cfoutput>
});
});
</script> <body>
<table style="width:100%; pading:0 100px 0 100px;">
<tr style=" font: bold 11px/16px arial, helvetica, sans-serif; text-align:center;background-color:#D5D9D8; color:white; line-height: 34px;text-shadow: #8F8E86 2px 2px 3px;">
<td>Throughput</td>
<td>CSI Score</td>
<td>WIP Cases</td>
</tr>
<tr style="text-align:center;">
<td><div id="container" style="min-width: 150px; max-width: 250px; height: 300px; margin: 0 auto"></div></td>
<td><div id="container1" style="min-width: 150px; max-width: 250px; height: 300px; margin: 0 0 0 100px"></div></td>
<td><div id="container3" style="min-width: 150px; max-width: 250px; height: 300px; margin: 0 auto"></div></td>
</tr>
<tr style="text-align:center;">
<td style="text-align:center;background-color:#bebebe; color:white; font-size: 16px;height: 40px;">Utilization</td>
<td rowspan = 3>
<div style="text-align:left">Bottom 20 overall</div>
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table><br><br><br><br><br>
<div style="text-align:left">Bottom 20 for SA</div>
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</td>
<td>80</td>
</tr>
<tr style="text-align:center">
<td rowspan = 2><div id="container4" style="min-width: 150px; max-width: 250px; height: 300px; margin: 0 auto"></div></td>
<td>Doe</td>
</tr>
<tr style="text-align:center">
<td>John</td>
</tr>
</table>
</body>最佳答案
有a related reported issue on Highcharts' github with a workaround这似乎适用于您的情况。
解决方案是在CSS中添加:
.highcharts-container, .highcharts-container svg { 宽度:100%!重要； }
以及 Firefox 的其他设置:
table { 表格布局:固定； }
应用修复的示例:http://jsfiddle.net/noz6xp99/
关于javascript - 如何让highchart完全占据已设置的div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36690707/