我对Highcharts还不熟悉，但有一个简单的问题：
我需要在单个浏览器窗口中混合几个（比如6或8个）小型Highcharts仪表盘和图表。这样做的可靠方法是为每个仪表盘创建一个单独的div，并将单独的Highcharts实例定位到每个div吗？
作为补充：即使有其他替代方法，这种多div方法是否与任何一种方法一样好，或者有什么优缺点？
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示例中的“just” 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]
}]
});
- no1uknow
2
您可以在一个 div 中使用多个 series。 http://jsfiddle.net/sbochan/wzprF/
- Sebastian Bochan
5
1当然。这取决于系列代表什么。对于完全不同的数据，我建议使用多分割基础方法，这更语义上正确。但是，对于链接数据，多系列方法会更好。 - Pierre Fourgeaud
确切地说，这是问题的另一种解决方案，因此可能对某些人有帮助。 - Sebastian Bochan
当然！我只是在指出两种方法的不同用法 ;) - Pierre Fourgeaud
1再次感谢Sebastien和Pierre。但如果我理解正确，多个仪表可能需要相互类似才值得将其作为多个系列进行处理？否则，当您尝试在一个整体图表定义中定义两个或更多相当不同的仪表时，我可以想象代码会变得非常混乱？（并且可能并没有节省太多重复编码？）也许保持单独的仪表代码有助于维护？你是否同意？ - johnd
@johnd 这取决于数据。语义上表示类似事物的数据应该在同一图表中具有多个系列，但如果您一侧是“ CAC 40指数的演变”，另一侧是“网站用户数量”（例如），则应使用看起来更适合此情况的多个div方法 :) - Pierre Fourgeaud
0
看起来唯一的方法是通过图表容器来实现。
在我个人看来，我认为多 div 的方法并不是一个坏主意。只要小心给 div 分配 id 就可以了。
但是你可以在 JavaScript 方面创建干净的代码。当你创建许多图表（6 或 8 个就很多了...）时，你必须避免代码重复...（至少限制重复）
有一种好方法可以使用 jQuery.extend() 和 Highcharts.setOptions 来实现：在单个网页中管理多个 Highchart 图表
- Pierre Fourgeaud
2
非常感谢。稍作澄清：我同意一个窗口中有6或8个大型、完整详细的图表可能太多了。然而，HC显然也可以制作仪表盘，并且300像素直径的仪表是相对较大的——在300 x 400像素的div中，您可以制作一个不错的仪表。因此，混合使用4或5个这样的仪表和可能还有几个中等大小、设计良好的图表，对于仪表板类型的项目来说应该是完全可行的。 - johnd
对于仪表板类型的项目，多div方法还不错。我已经看到了有6到9个图表的管理仪表板;)就像我说的那样，我建议您限制重复。 - Pierre Fourgeaud
-3
请确保您的 div 容器格式如下
<div ... ></div>
而不是
<div ... />
因为它可能无法正确呈现。
- Agustín
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接