0
derzeit mache ich HighCharts mit Coldfusion. Ich muss 3 Tabellen in der Tabelle mit derselben Spalte Größe anzeigen, und die Diagramme müssen das div, das gesetzt hatte, besetzen. Es ist mir gelungen, alle Diagramme anzuzeigen, aber die Spaltengröße ist nicht gleich und das Diagramm belegt die Spalte nicht. Unten ist der Druckbildschirm meines Bildes und Codes. 
Wie macht man das Highchart voll besetzt mit dem eingestellten 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);
}
}
}
}
},
\t \t 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'
},
\t \t 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'
},
\t \t 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>
\t <table style="width:100%; pading:0 100px 0 100px;">
\t <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;">
\t <td>Throughput</td>
\t <td>CSI Score</td> \t \t
\t <td>WIP Cases</td>
\t </tr>
\t <tr style="text-align:center;">
\t <td><div id="container" style="min-width: 150px; max-width: 250px; height: 300px; margin: 0 auto"></div></td>
\t <td><div id="container1" style="min-width: 150px; max-width: 250px; height: 300px; margin: 0 0 0 100px"></div></td> \t \t
\t <td><div id="container3" style="min-width: 150px; max-width: 250px; height: 300px; margin: 0 auto"></div></td>
\t </tr>
\t <tr style="text-align:center;">
\t <td style="text-align:center;background-color:#bebebe; color:white; font-size: 16px;height: 40px;">Utilization</td>
\t <td rowspan = 3>
\t \t <div style="text-align:left">Bottom 20 overall</div>
\t \t <table style="width:100%">
\t \t \t <tr>
\t \t \t <td>Jill</td>
\t \t \t <td>Smith</td>
\t \t \t <td>50</td>
\t \t \t </tr>
\t \t \t <tr>
\t \t \t <td>Eve</td>
\t \t \t <td>Jackson</td>
\t \t \t <td>94</td>
\t \t \t </tr>
\t \t \t </table><br><br><br><br><br>
\t \t \t <div style="text-align:left">Bottom 20 for SA</div>
\t \t \t <table style="width:100%">
\t \t \t <tr>
\t \t \t <td>Jill</td>
\t \t \t <td>Smith</td>
\t \t \t <td>50</td>
\t \t \t </tr>
\t \t \t <tr>
\t \t \t <td>Eve</td>
\t \t \t <td>Jackson</td>
\t \t \t <td>94</td>
\t \t \t </tr>
\t \t \t </table>
\t \t </td> \t \t
\t <td>80</td>
\t </tr>
\t <tr style="text-align:center">
\t <td rowspan = 2><div id="container4" style="min-width: 150px; max-width: 250px; height: 300px; margin: 0 auto"></div></td>
\t <td>Doe</td>
\t </tr>
\t <tr style="text-align:center">
\t <td>John</td>
\t </tr>
\t </table>
</body>
Highcharts Regel erbt die Breite von das enthaltende div, ich bin mir nicht sicher, ob es das gleiche für die min/max-width thou macht gh. – apokryfos
Warum ist dies mit ColdFusion markiert? Dieses Problem hat nichts mit ColdFusion zu tun. –
Ursache Ich mache die Highcharts in Coldfusion –