显示选定点的 Highcharts 工具提示
Highcharts tooltip showing selected points
我在单击时允许多个 selection(第一次单击 select 一个图表,第二次单击对该图表执行向下钻取)。我想显示一个显示所有 selected 图表的工具提示(或任何其他方式)(即:如果我 select 两个图表我想要一个显示关于这两个图表的信息的工具提示)。
这是我的 HTML:
<html>
<head>
<title>Highcharts</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="http://github.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="highcharts.js" type="text/javascript"></script>
<!--Black theme
<script src="black-theme.js" type="text/javascript"></script>
-->
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<!-- <button id="button">Get selected points</button>
<div>event: <span id="label"></span></div>-->
</body>
</html>
这是我的 Javascript 文件:
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'column',
events: {
drilldown: function (e) {
if (!e.seriesOptions && e.point.selected) {
var chart = this,
points = chart.getSelectedPoints(),
drilldowns = {
'Animals': {
name: 'Animals',
data: [
['Cows', 2],
['Sheep', 3]
]
},
'Fruits': {
name: 'Fruits',
data: [
['Apples', 5],
['Oranges', 7],
['Bananas', 2]
]
},
'Cars': {
name: 'Cars',
data: [
['Toyota', 1],
['Volkswagen', 2],
['Opel', 5]
]
}
};
Highcharts.each(points, function (p) {
chart.addSingleSeriesAsDrilldown(p, drilldowns[p.name]);
});
chart.applyDrilldown();
}
},
drillup: function (e) {
var chart = this,
points = [];
setTimeout(function () {
points = chart.getSelectedPoints();
Highcharts.each(points, function (p) {
// unselect points from previous drilldown
p.selected = false;
p.setState('', true);
});
}, 0);
}
}
},
title: {
text: 'Async drilldown'
},
xAxis: {
type: 'category',
categories: [
'Animals',
'Fruits',
'Cars'
],
},
yAxis: {
title: {
text: 'Values'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
footerFormat: '</table>',
shared: false,
useHTML: true
},
legend: {
enabled: false
},
plotOptions: {
column: {
allowPointSelect: true
},
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
allowPointSelect: true,
name: 'Test things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: true
}, {
name: 'Fruits',
y: 2,
drilldown: true
}, {
name: 'Cars',
y: 4,
drilldown: true
}]
}],
drilldown: {
series: []
}
});
});
编辑:我试过这个解决方案,但不幸的是只显示了最后一点 selected:
plotOptions: {
column: {
allowPointSelect: true
},
series: {
borderWidth: 0,
dataLabels: {
enabled: true
},
point: {
events: {
select: function () {
var text = this.category + ': ' + this.y + ' was last selected',
chart = this.series.chart;
if (!chart.lbl) {
chart.lbl = chart.renderer.label(text, 100, 70)
.attr({
padding: 10,
r: 5,
fill: Highcharts.getOptions().colors[1],
zIndex: 5
})
.css({
color: '#FFFFFF'
})
.add();
} else {
chart.lbl.attr({
text: text
});
}
}
}
},
}
},
感谢您的帮助!
可以得到所有的selected点,通过chart.getSelectedpoints()
(drilldown中也是如此),如果selections是累加的(event.accumulative
in select 事件将为真)将有关所有 selected 点的信息添加到您的自定义标签中。
示例:http://jsfiddle.net/xbvmpev5/
编辑:
更改代码,因为上面的描述不够清楚:
point: {
events: {
select: function (event) {
var text = 'All selected points: <br/>',
chart = this.series.chart,
otherSelected = chart.getSelectedPoints();
if (event.accumulate) {
Highcharts.each(otherSelected, function (point) {
text += point.category + ': ' + point.y + '<br/>';
});
}
text += this.category + ': ' + this.y + ' (last selected)';
我在单击时允许多个 selection(第一次单击 select 一个图表,第二次单击对该图表执行向下钻取)。我想显示一个显示所有 selected 图表的工具提示(或任何其他方式)(即:如果我 select 两个图表我想要一个显示关于这两个图表的信息的工具提示)。
这是我的 HTML:
<html>
<head>
<title>Highcharts</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="http://github.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="highcharts.js" type="text/javascript"></script>
<!--Black theme
<script src="black-theme.js" type="text/javascript"></script>
-->
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<!-- <button id="button">Get selected points</button>
<div>event: <span id="label"></span></div>-->
</body>
</html>
这是我的 Javascript 文件:
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'column',
events: {
drilldown: function (e) {
if (!e.seriesOptions && e.point.selected) {
var chart = this,
points = chart.getSelectedPoints(),
drilldowns = {
'Animals': {
name: 'Animals',
data: [
['Cows', 2],
['Sheep', 3]
]
},
'Fruits': {
name: 'Fruits',
data: [
['Apples', 5],
['Oranges', 7],
['Bananas', 2]
]
},
'Cars': {
name: 'Cars',
data: [
['Toyota', 1],
['Volkswagen', 2],
['Opel', 5]
]
}
};
Highcharts.each(points, function (p) {
chart.addSingleSeriesAsDrilldown(p, drilldowns[p.name]);
});
chart.applyDrilldown();
}
},
drillup: function (e) {
var chart = this,
points = [];
setTimeout(function () {
points = chart.getSelectedPoints();
Highcharts.each(points, function (p) {
// unselect points from previous drilldown
p.selected = false;
p.setState('', true);
});
}, 0);
}
}
},
title: {
text: 'Async drilldown'
},
xAxis: {
type: 'category',
categories: [
'Animals',
'Fruits',
'Cars'
],
},
yAxis: {
title: {
text: 'Values'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
footerFormat: '</table>',
shared: false,
useHTML: true
},
legend: {
enabled: false
},
plotOptions: {
column: {
allowPointSelect: true
},
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
allowPointSelect: true,
name: 'Test things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: true
}, {
name: 'Fruits',
y: 2,
drilldown: true
}, {
name: 'Cars',
y: 4,
drilldown: true
}]
}],
drilldown: {
series: []
}
});
});
编辑:我试过这个解决方案,但不幸的是只显示了最后一点 selected:
plotOptions: {
column: {
allowPointSelect: true
},
series: {
borderWidth: 0,
dataLabels: {
enabled: true
},
point: {
events: {
select: function () {
var text = this.category + ': ' + this.y + ' was last selected',
chart = this.series.chart;
if (!chart.lbl) {
chart.lbl = chart.renderer.label(text, 100, 70)
.attr({
padding: 10,
r: 5,
fill: Highcharts.getOptions().colors[1],
zIndex: 5
})
.css({
color: '#FFFFFF'
})
.add();
} else {
chart.lbl.attr({
text: text
});
}
}
}
},
}
},
感谢您的帮助!
可以得到所有的selected点,通过chart.getSelectedpoints()
(drilldown中也是如此),如果selections是累加的(event.accumulative
in select 事件将为真)将有关所有 selected 点的信息添加到您的自定义标签中。
示例:http://jsfiddle.net/xbvmpev5/
编辑:
更改代码,因为上面的描述不够清楚:
point: {
events: {
select: function (event) {
var text = 'All selected points: <br/>',
chart = this.series.chart,
otherSelected = chart.getSelectedPoints();
if (event.accumulate) {
Highcharts.each(otherSelected, function (point) {
text += point.category + ': ' + point.y + '<br/>';
});
}
text += this.category + ': ' + this.y + ' (last selected)';