我从这个Highcharts activity gauge开始，尝试使其中两个水平对齐（类似于this other example）并同步。
基于第二个示例，我开始从第一个示例中修改代码，但到目前为止，我没有成功，第二个图表甚至都无法成功显示。
我做错了什么？
我的代码，也在JSFiddle中：
function renderIcons() {
// Move icon
if (!this.series[0].icon) {
this.series[0].icon = this.renderer.path(['M', -8, 0, 'L', 8, 0, 'M', 0, -8, 'L', 8, 0, 0, 8])
.attr({
'stroke': '#303030',
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
'stroke-width': 2,
'zIndex': 10
})
.add(this.series[2].group);
}
this.series[0].icon.translate(
this.chartWidth / 2 - 10,
this.plotHeight / 2 - this.series[0].points[0].shapeArgs.innerR -
(this.series[0].points[0].shapeArgs.r - this.series[0].points[0].shapeArgs.innerR) / 2
);
// Exercise icon
if (!this.series[1].icon) {
this.series[1].icon = this.renderer.path(
['M', -8, 0, 'L', 8, 0, 'M', 0, -8, 'L', 8, 0, 0, 8,
'M', 8, -8, 'L', 16, 0, 8, 8
]
)
.attr({
'stroke': '#ffffff',
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
'stroke-width': 2,
'zIndex': 10
})
.add(this.series[2].group);
}
this.series[1].icon.translate(
this.chartWidth / 2 - 10,
this.plotHeight / 2 - this.series[1].points[0].shapeArgs.innerR -
(this.series[1].points[0].shapeArgs.r - this.series[1].points[0].shapeArgs.innerR) / 2
);
// Stand icon
if (!this.series[2].icon) {
this.series[2].icon = this.renderer.path(['M', 0, 8, 'L', 0, -8, 'M', -8, 0, 'L', 0, -8, 8, 0])
.attr({
'stroke': '#303030',
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
'stroke-width': 2,
'zIndex': 10
})
.add(this.series[2].group);
}
this.series[2].icon.translate(
this.chartWidth / 2 - 10,
this.plotHeight / 2 - this.series[2].points[0].shapeArgs.innerR -
(this.series[2].points[0].shapeArgs.r - this.series[2].points[0].shapeArgs.innerR) / 2
);
}
Highcharts.chart('container', {
chart: {
type: 'solidgauge',
//height: 200,
height: '50%',
events: {
render: renderIcons
}
},
title: {
text: 'Activity',
style: {
fontSize: '24px'
}
},
tooltip: {
borderWidth: 0,
backgroundColor: 'none',
shadow: false,
style: {
fontSize: '16px'
},
pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}%</span>',
positioner: function(labelWidth) {
return {
x: (this.chart.chartWidth - labelWidth) / 2,
y: (this.chart.plotHeight / 2) + 15
};
}
},
pane: [{
startAngle: 0,
endAngle: 360,
center: ['25%', '50%'],
background: [{ // Track for Move
outerRadius: '112%',
innerRadius: '88%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0])
.setOpacity(0.3)
.get(),
borderWidth: 0
}, { // Track for Exercise
outerRadius: '87%',
innerRadius: '63%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1])
.setOpacity(0.3)
.get(),
borderWidth: 0
}, { // Track for Stand
outerRadius: '62%',
innerRadius: '38%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[2])
.setOpacity(0.3)
.get(),
borderWidth: 0
}]
},
{
startAngle: 0,
endAngle: 360,
center: ['75%', '50%'],
background: [{ // Track for Move
outerRadius: '112%',
innerRadius: '88%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0])
.setOpacity(0.3)
.get(),
borderWidth: 0
}, { // Track for Exercise
outerRadius: '87%',
innerRadius: '63%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1])
.setOpacity(0.3)
.get(),
borderWidth: 0
}, { // Track for Stand
outerRadius: '62%',
innerRadius: '38%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[2])
.setOpacity(0.3)
.get(),
borderWidth: 0
}]
}
],
yAxis: [{
min: 0,
max: 100,
lineWidth: 0,
pane: 0,
tickPositions: []
},
{
min: 0,
max: 100,
lineWidth: 0,
pane: 1,
tickPositions: []
}
],
plotOptions: {
solidgauge: {
dataLabels: {
enabled: false
},
linecap: 'round',
stickyTracking: false,
rounded: true
}
},
series: [{
name: 'Move',
data: [{
color: Highcharts.getOptions().colors[0],
radius: '112%',
innerRadius: '88%',
yAxis: 0,
pane: 0,
y: 80
}]
}, {
name: 'Exercise',
data: [{
color: Highcharts.getOptions().colors[1],
radius: '87%',
innerRadius: '63%',
yAxis: 0,
pane: 0,
y: 65
}]
}, {
name: 'Stand',
data: [{
color: Highcharts.getOptions().colors[2],
radius: '62%',
innerRadius: '38%',
yAxis: 0,
pane: 0,
y: 50
}]
},
{
name: 'Move',
data: [{
color: Highcharts.getOptions().colors[0],
radius: '112%',
innerRadius: '88%',
yAxis: 1,
pane: 1,
y: 75
}]
}, {
name: 'Exercise',
data: [{
color: Highcharts.getOptions().colors[1],
radius: '87%',
innerRadius: '63%',
yAxis: 1,
pane: 1,
y: 60
}]
}, {
name: 'Stand',
data: [{
color: Highcharts.getOptions().colors[2],
radius: '62%',
innerRadius: '38%',
yAxis: 1,
pane: 1,
y: 45
}]
}
]
});<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<div id="container" style="width: 800px; height: 300px; margin: 0 auto"></div>
答案 0 :(得分：2)
示例中的问题是您没有单独的图表，而一个图表带有两个yAxis。在此处查看Highcharts同步图表示例：jsfiddle。请注意，每个图表都是单独的，并插入到单独的div容器中。
因此，首先创建两个实体表类型图表，然后将它们水平对齐。然后在包含图表的容器div元素上添加mousemove触发器。高图会包装所有浏览器事件，当您将鼠标悬停在图表系列上时，就会获得有关悬停的图表，系列等的信息。
使用悬浮序列索引在两个图表中的适当序列上调用onMouseOver()方法，并使用悬浮序列中的点刷新工具提示：
HTML：
<div id="container">
<div id="container1"></div>
<div id="container2"></div>
</div>
JS：
['mousemove', 'touchmove', 'touchstart'].forEach(function(eventType) {
document.getElementById('container').addEventListener(
eventType,
function(e) {
var chart,
point,
i,
seriesIndex,
event;
for (i = 0; i < Highcharts.charts.length; i = i + 1) {
chart = Highcharts.charts[i];
event = chart.pointer.normalize(e);
if (event.srcElement.point) {
seriesIndex = event.srcElement.point.series.index;
}
if (chart.series[seriesIndex]) {
point = chart.series[seriesIndex].points[0];
chart.series[seriesIndex].onMouseOver();
chart.tooltip.refresh(point);
}
}
}
);
});
注意，Highcharts.charts包含所有图表参考。