highcharts 的新手，但一个简单的问题：
我需要在一个浏览器窗口中混合几个（比如 6 个或 8 个）小型 Highcharts 仪表和图表。这样做的唯一可靠方法是为每个 div 创建一个单独的 div 并在每个 div 上定位一个单独的 Highcharts 实例吗？
并且作为补充：即使有另一种方法，这种多div方法是否与任何方法一样好，还是有优缺点？
问问题
32249 次
4 回答
4
这是我在同一页面上执行多个 Highcharts 的方法。
http://jsfiddle.net/no1uknow/Jb2cb/2/
请记住，如果您想支持包括 IE8 在内的大多数浏览器，您将需要使用 jQuery 1.9.1 和 Highcharts JS 3.0.x+。这个 jsfiddle 演示将跨浏览器工作。
有很多例子为每个图表使用“var chart”单数，但我喜欢为每个 div 容器创建一个 var container_chartname。这种技术给了我更多的控制权，可以与每个图表进行实时交互。比如调整大小，更新数据等。
如果您打算使用表单来动态构建图表，那么您还可以“仅”使用上述 jsfiddle 示例中的 javascript 代码作为 json 回调。每次您在表单上动态点击提交时，这将加载所有 div。
Stackoverflow 要求我在此处发布代码，但请参阅 jsfiddle 以获取完整的代码...
当然这只是我的技术，还有很多其他的......
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]
}]
});
于 2013-08-22T13:40:38.543 回答
2
您还可以series在一个 div 中使用多个。http://jsfiddle.net/sbochan/wzprF/
于 2013-07-15T11:45:05.487 回答
0
似乎这样做的唯一方法是按图表拥有一个容器。
在我自己看来，我不认为多 div 方法是一个坏主意。请注意您将提供给 div 的 id。
但是您可以在 javascript 端创建一个干净的代码。当您创建许多图表时（6 或 8 很多...），您必须避免代码重复...（至少要限制重复）
有一个很好的方法来做到这一点jQuery.extend()和Highcharts.setOptions：在单个网页中管理多个高图表
于 2013-07-14T21:02:45.253 回答
-3
确保您的 div 容器的格式如下
<div ... ></div>
并不是
<div ... />
因为它可能无法正确渲染。
于 2014-10-19T20:09:06.590 回答