如何从工具提示格式化程序显示高图系列线标记符号？ [英] How to display highchart series line marker symbol from tooltip formatter?
问题描述
默认情况下，highcharts在工具提示中显示线标记符号。
$（function（）{
$（'＃container'）。highcharts（{
xAxis ：{'b'b'类别：['Jan'，'Feb'，'Mar'，'Apr'，'May'，'Jun'，'Jul'，'Aug'，'Sep'，'Oct' 11月'，'12月']
}，
系列：[{
数据：[29.9,71.5,106.4,129.2,144.0,176.0,135.6,148.5,216.4，
}，{
数据：[194.1，95.6，54.4，29.9，71.5，106.4，129.2，144.0，176.0，135.6，148.5，216.4]
}]
}）;
}）;
Highcharts公开图形对象中的 symbolName 属性，该属性本身位于点对象本身。它使用的形状为：
-
circle -
diamond♦ -
square■ -
triangle▲ -
triangle-down▼
有了这些信息，我们可以构建一个 switch tooltip.formatter（）函数，它将相关符号与Highcharts公开的符号名称相映射：
var symbol;
switch（this.point.graphic.symbolName）{
case'circle'：
symbol ='●';
休息;
case'diamond'：
symbol ='♦';
休息;
case'square'：
symbol ='■';
休息;
case'triangle'：
symbol ='▲';
休息;
case'triangle-down'：
symbol ='▼';
休息;
}
然后我们可以将符号放在我们的工具提示中，通过引用我们的符号变量：
return this.x +'< br />'+符号+''+ this.series.name +'：'+ this.y;
添加颜色
b
$ b
已使用以下图片：
值得注意的是，尽管这个解决方案对于这个问题工作正常，但在处理自定义标记图像时会下降 - 使用这些图像时，不会出现图形对象或 symbolName 属性，因为我们正在使用自己的图像，所以我们不希望显示任何形状。
首先要告诉Highcharts，我们希望在我们的工具提示中使用HTML。我们可以通过在我们的工具提示对象上指定 useHTML：true 来完成此操作：
工具提示：{
formatter：function（）{...}，
useHTML：true
}
幸运的是，Highcharts工具提示支持HTML < img /> 元素并允许我们通过标记对象内的符号属性，使用 this.point.marker.symbol 。
this.point.marker.symbol
- > url（http://i.imgur.com/UZHiQFQ.png）
第二道关卡正在移除实际图片网址周围的网址（和）。为此，我们可以使用正则表达式来匹配我们想要移除的位。我用过的正则表达式是 / ^ url \（| \）$ / g ，它可视化为：
g 在最后表明我们想要拉取任何匹配，因此我们可以替换 url（和<$ c
var url = this.point.marker.symbol.replace（/ ^ url \（| \）$ / g，''）;
- > http://i.imgur.com/UZHiQFQ.png
然后我们可以将它放入我们的< img /> 元素，并将其存储在符号变量中：
symbol ='< img src =''+ url +'alt =Marker/>';
最后，我们希望确保标记对象和符号属性存在。如果在 中声明的语句原始之上，则选择确保符号存在上面：
if（this.point.graphic&& this.point。 （this.point.marker&& this.point.marker.symbol）{...}
By default highcharts display the line marker symbol in the tooltip.
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
data: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4]
}]
});
});
http://jsfiddle.net/sashi799/vsyfmu77/
Using tooltip formatter how can we add the line marker symbol?
$(function () {
$('#container').highcharts({
tooltip: {
formatter: function () {
return this.x+'<br/>'+this.series.name+': '+this.y;
}
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
data: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4]
}]
});
});
http://jsfiddle.net/sashi799/zrhaokrn/
I want to add the circle symbol in front of the series name from formatter like it is in default scenario.
I'm posting my own answer here as Kacper Madej's answer here doesn't really answer the question at all, it simply places the 5 different symbols Highcharts uses in the same tooltip:
This answer does work if we're using multiple colours, but it'd fail completely if all our series had the same colour - you may as well not display them at all.
Pulling the relevant symbol into our tooltip
Highcharts exposes a symbolName property within its graphic object which is a property itself on the point object itself. The shapes it uses are:
"circle"●"diamond"♦"square"■"triangle"▲"triangle-down"▼
With this information, we can construct a switch statement within our tooltip.formatter() function which maps the relevant symbol with the symbol name that Highcharts exposes:
var symbol;
switch ( this.point.graphic.symbolName ) {
case 'circle':
symbol = '●';
break;
case 'diamond':
symbol = '♦';
break;
case 'square':
symbol = '■';
break;
case 'triangle':
symbol = '▲';
break;
case 'triangle-down':
symbol = '▼';
break;
}
We can then place the symbol within our tooltip by referencing our symbol variable:
return this.x + '<br/>' + symbol + ' ' + this.series.name + ': ' + this.y;
Adding colour
We can then extend this to colour in our point to match the colour of the series. This simply involves wrapping our symbol in a <span> element, and giving it a style set to the colour of the series, which Highcharts gives us through this.series.color:
'<span style="color:' + this.series.color + '">' + symbol + '</span>';
Ensuring the symbol exists
Before putting this into production, however, you should be aware that sometimes a tooltip will appear for a point which has neither a graphic object or a symbolName property at all. This can occur when a point exists outside of the visible bounds of our chart - a tooltip will appear when hovering over the line, but the point itself isn't visible so has no need for any graphical-related properties.
To prevent JavaScript errors, we need to wrap our switch statement in the following if clause:
if ( this.point.graphic && this.point.graphic.symbolName )
With this, you'd also want to initially define your symbol variable as an empty string ('') so that it doesn't display as undefined in our tooltip:
var symbol = '';
Handling custom marker images
For this example I've used the following image:
It's worth noting that whilst this solution works fine for this question, it will fall down when dealing with custom marker images - when these are used, there is no graphic object or symbolName property, and as we're using our own image we wouldn't want to display any of the shapes above anyway.
The first thing to do is tell Highcharts that we want to use HTML within our tooltip. We can do this by specifying useHTML: true on our tooltip object:
tooltip: {
formatter: function() { ... },
useHTML: true
}
Fortunately, Highcharts tooltips support the HTML <img /> element and allow us to pull the custom image URL through the symbol property within the marker object using this.point.marker.symbol.
this.point.marker.symbol
-> "url(http://i.imgur.com/UZHiQFQ.png)"
The second hurdle is removing the url( and ) surrounding the actual image URL. For this we can use a regular expression to match the bits we want to remove. The regular expression I've gone with is /^url\(|\)$/g, which is visualised as:
The g at the end states that we want to pull any matches, so we can replace both url( and ) in one foul swoop:
var url = this.point.marker.symbol.replace(/^url\(|\)$/g, '');
-> "http://i.imgur.com/UZHiQFQ.png"
We can then place this into our <img /> element, and store that in our symbol variable:
symbol = '<img src="' + url + '" alt="Marker" />';
Finally we want to ensure that the marker object and symbol property exist. I've chosen to do this as an else if on top of the original if statement declared in the Ensuring the symbol exists part above:
if ( this.point.graphic && this.point.graphic.symbolName ) { ) { ... }
else if ( this.point.marker && this.point.marker.symbol ) { ... }
这篇关于如何从工具提示格式化程序显示高图系列线标记符号？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
