Highcharts 海图-多个海图
highcharts的新功能，但一个简单的问题： 我需要在一个浏览器窗口中混合几个（比如6或8个）小型海图、仪表和图表。唯一可靠的方法是为每个div创建一个单独的div，并在每个div中针对一个单独的Highcharts实例吗Highcharts 海图-多个海图,highcharts,Highcharts,highcharts的新功能，但一个简单的问题： 我需要在一个浏览器窗口中混合几个（比如6或8个）小型海图、仪表和图表。唯一可靠的方法是为每个div创建一个单独的div，并在每个div中针对一个单独的Highcharts实例吗 作为补充：即使有替代方法，这种多div方法是否与其他方法一样好，或者是否有优点和缺点？似乎唯一的方法是通过图表创建一个容器 在我看来，我不认为多部门方法是个坏主意。只要小心你要给部门的身份证就行了 但是您可以在javascript端创建干净的代码。当您创建许多图表（6或8
作为补充：即使有替代方法，这种多div方法是否与其他方法一样好，或者是否有优点和缺点？似乎唯一的方法是通过图表创建一个容器 在我看来，我不认为多部门方法是个坏主意。只要小心你要给部门的身份证就行了 但是您可以在javascript端创建干净的代码。当您创建许多图表（6或8是很多…）时，您必须避免代码重复。。。（至少要限制重复）
使用
jQuery.extend（）Highcharts.setOptions系列 var container_chartCorrectiveAction = new Highcharts.Chart({
chart: {
renderTo: 'container_chartCorrectiveAction',
type: 'bar',
height: 195
},
title: {
text: 'Corrective Action'
},
subtitle: {
text: 'Sub-ATA () / ATA (20)'
},
xAxis: {
categories: ['No Defects Found-Fastener-Loose / Displaced'],
title: {
text: 'Action'
},
labels: {
style: {
width: '12000px'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Count',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
formatter: function() {
return ''+ this.series.name +': '+ this.y +' Count';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
},
series: {
pointWidth:10,
groupPadding: .05,
shadow: true
}
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
floating: false,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true,
labelFormatter: function() {
return '<div class="' + this.name + '-arrow"></div><span style="font-family: \'Advent Pro\', sans-serif; font-size:12px">' + this.name +'</span><br/><span style="font-size:10px; color:#ababaa"> Total: ' + this.options.total + '</span>';
}
},
credits: {
enabled: false
},
exporting: {
enabled: true
},
series: [{
name: 'Heavy',
total: '0',
data: [null]
},{
name: 'Intermediate',
total: '0',
data: [null]
},{
name: 'Line',
total: '0',
data: [null]
},{
name: 'Lite',
total: '1',
data: [1]
}]
});
var container_chartAtaFleetAvg = new Highcharts.Chart({
chart: {
renderTo: 'container_chartAtaFleetAvg',
type: 'bar',
height: 185
},
title: {
text: 'Fleet Average'
},
subtitle: {
text: 'ATA (20)'
},
xAxis: {
categories: ['Fleet Average'],
title: {
text: ''
},
labels: {
style: {
width: '12000px'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Average',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
formatter: function() {
return ''+ this.series.name +': '+ this.y +' Average';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
},
series: {
pointWidth:10,
groupPadding: .05,
shadow: true
}
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
floating: false,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true,
labelFormatter: function() {
return '<div class="' + this.name + '-arrow"></div><span style="font-family: \'Advent Pro\', sans-serif; font-size:12px">' + this.name +'</span><br/><span style="font-size:10px; color:#ababaa"> Total: ' + this.options.total + '</span>';
}
},
credits: {
enabled: false
},
exporting: {
enabled: true
},
series: [{
name: 'Intermediate',
total: '0.35',
data: [0.35]
},{
name: 'Lite',
total: '0.3',
data: [0.30]
},{
name: 'Heavy',
total: '0.1',
data: [0.10]
}]
});
var容器\u chartCorrectiveAction=新建Highcharts.Chart({
图表：{
renderTo:“容器\u图表更正操作”，
类型：'bar'，
身高：195
},
标题：{
文本：“纠正措施”
},
副标题:{
文本：“子ATA（）/ATA（20）”
},
xAxis：{
类别：[“未发现任何缺陷，紧固件松动/移位”]，
标题：{
文本：“行动”
},
标签：{
风格：{
宽度：“12000px”
}
}
},
亚克斯：{
分:0,，
标题：{
文本：“计数”，
对齐：“高”
},
标签：{
溢出：'justify'
}
},
工具提示：{
格式化程序：函数（）{
返回'+this.series.name+'：'+this.y+'Count'；
}
},
打印选项：{
酒吧：{
数据标签：{
已启用：true
}
},
系列：{
点宽度：10，
分组填充：.05，
影子：对
}
},
图例：{
布局：“水平”，
对齐：'居中'，
垂直排列：“底部”，
浮动：假，
边框宽度：1，
背景颜色：“#FFFFFF”，
影子：没错，
labelFormatter:function（）{
返回“+this.name+”
Total:“+this.options.Total+”；
}
},
学分：{
已启用：false
},
导出：{
已启用：true
},
系列：[{
名称：'重'，
总计：“0”，
数据：[null]
},{
名称：'中间'，
总计：“0”，
数据：[null]
},{
名称：'行'，
总计：“0”，
数据：[null]
},{
名称：“Lite”，
总计：“1”，
数据：[1]
}]
});
var container\u CHARTATAFERTEAVG=新的Highcharts.Chart({
图表：{
renderTo:'集装箱图表车队平均'，
类型：'bar'，
身高：185
},
标题：{
文本：“车队平均值”
},
副标题:{
正文：“ATA（20）”
},
xAxis：{
类别：[“船队平均值”]，
标题：{
文本：“”
},
标签：{
风格：{
宽度：“12000px”
}
}
},
亚克斯：{
分:0,，
标题：{
文本：'平均'，
对齐：“高”
<div ... ></div>
<div ... />