javascript 如何从工具提示格式化程序显示 highchart 系列线标记符号？

Question

提问by Sas

By default highcharts display the line marker symbol in the tooltip.

默认情况下，highcharts 在工具提示中显示线标记符号。

$(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.

我想在格式化程序的系列名称前面添加圆圈符号，就像在默认情况下一样。

Answer 1

回答by James Donnelly

I'm posting my own answer here as Kacper Madej's answerhere doesn't really answer the question at all, it simply places the 5 different symbols Highcharts uses in the same tooltip:

我在这里发布我自己的答案，因为Kacper Madej在这里的答案根本没有真正回答这个问题，它只是将 Highcharts 使用的 5 个不同符号放在同一个工具提示中：

Pulling the relevant symbol into our tooltip

将相关符号拉入我们的工具提示

Example Tooltip JSFiddle demo

示例工具提示 JSFiddle 演示

Highcharts exposes a symbolNameproperty within its graphicobject which is a property itself on the pointobject itself. The shapes it uses are:

HighchartssymbolName在其graphic对象中公开一个属性，该属性本身是point对象本身的属性。它使用的形状是：

"circle"●
"diamond"?
"square"■
"triangle"▲
"triangle-down"▼

"circle"●
"diamond"?
"square"■
"triangle"▲
"triangle-down"▼

With this information, we can construct a switchstatement within our tooltip.formatter()function which maps the relevant symbol with the symbol name that Highcharts exposes:

有了这些信息，我们可以switch在我们的tooltip.formatter()函数中构造一个语句，将相关的交易品种与 Highcharts 公开的交易品种名称进行映射：

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 symbolvariable:

然后我们可以通过引用我们的symbol变量将符号放置在我们的工具提示中：

return this.x + '<br/>' + symbol + ' ' + this.series.name + ': ' + this.y;

Adding colour

添加颜色

Coloured Symbol JSFiddle demo

彩色符号 JSFiddle 演示

We can then extend this to colour in our point to match the colour of the series. This simply involves wrapping our symbolin a <span>element, and giving it a styleset to the colour of the series, which Highcharts gives us through this.series.color:

然后我们可以将其扩展到我们点的颜色以匹配系列的颜色。这只是涉及将我们symbol的<span>元素包裹在一个元素中，并为其style设置系列的颜色，Highcharts 通过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 graphicobject or a symbolNameproperty 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.

但是，在将其投入生产之前，您应该意识到有时会为根本没有graphic对象或symbolName属性的点显示工具提示。当一个点存在于我们图表的可见边界之外时，就会发生这种情况——将鼠标悬停在该线上时会出现一个工具提示，但该点本身不可见，因此不需要任何与图形相关的属性。

To prevent JavaScript errors, we need to wrap our switchstatement in the following ifclause:

为了防止 JavaScript 错误，我们需要将我们的switch语句包含在以下if子句中：

if ( this.point.graphic && this.point.graphic.symbolName )

With this, you'd also want to initially define your symbolvariable as an empty string ('') so that it doesn't display as undefinedin our tooltip:

有了这个，您还希望最初将您的symbol变量定义为空字符串 ( '')，这样它就不会在我们的工具提示中显示为未定义：

var symbol = '';

Handling custom marker images

处理自定义标记图像

Image Marker Example JSFiddle demo

图像标记示例 JSFiddle 演示

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 graphicobject or symbolNameproperty, and as we're using our own image we wouldn't want to display any of the shapes above anyway.

值得注意的是，虽然此解决方案适用于这个问题，但在处理自定义标记图像时它会失败 - 当使用这些图像时，没有graphic对象或symbolName属性，并且由于我们使用的是我们自己的图像，我们不想要无论如何显示上面的任何形状。

The first thing to do is tell Highcharts that we want to use HTML within our tooltip. We can do this by specifying useHTML: trueon our tooltipobject:

首先要做的是告诉 Highcharts 我们要在工具提示中使用 HTML。我们可以通过useHTML: true在我们的tooltip对象上指定来做到这一点：

tooltip: {
    formatter: function() { ... },
    useHTML: true
}

Fortunately, Highcharts tooltips support the HTML <img />element and allow us to pull the custom image URL through the symbolproperty within the markerobject using this.point.marker.symbol.

幸运的是，Highcharts提示支持HTML<img />元素，让我们通过拉自定义图像URLsymbol属性中marker使用对象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:

第二个障碍是删除实际图像 URLurl(及其)周围的内容。为此，我们可以使用正则表达式来匹配我们要删除的位。我使用的正则表达式是/^url$|$$/g，可视化为：

Regexper Example

正则表达式示例

The gat the end states that we want to pull any matches, so we can replace both url(and )in one foul swoop:

将g在最后指出，我们要拉任何比赛，所以我们可以同时取代url(，并)在一个犯规一举：

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 symbolvariable:

然后我们可以将它放入我们的<img />元素中，并将其存储在我们的symbol变量中：

symbol = '<img src="' + url + '" alt="Marker" />';

Finallywe want to ensure that the markerobject and symbolproperty exist. I've chosen to do this as an else ifon top of the original ifstatement declared in the Ensuring the symbol existspart above:

最后我们要确保marker对象和symbol属性存在。我选择else if在上面的if“确保符号存在”部分中声明的原始语句之上执行此操作：

if ( this.point.graphic && this.point.graphic.symbolName ) { ) { ... }
else if ( this.point.marker && this.point.marker.symbol ) { ... }

Answer 2

回答by Lauren O.

I can see this is an older thread, but since the Highcharts API appears to differ on some points since the original post I'm providing an update here with the details that just worked for me in case this is helpful to others...

我可以看到这是一个较旧的线程，但是由于 Highcharts API 在某些方面似乎有所不同，因为自原始帖子以来，我在这里提供了更新，其中包含对我有用的详细信息，以防对其他人有帮助...

I'm using Highcharts JS v4.2.6 (2016-08-02) (along with highcharts-ng 0.0.12) and wasn't able to access the this.point.graphic.symbolNameproperty to implement James Donnelly'ssolution -- instead I had to modify it to access this.series.symbol.

我正在使用 Highcharts JS v4.2.6 (2016-08-02)（以及 highcharts-ng 0.0.12）并且无法访问该this.point.graphic.symbolName属性来实现James Donnelly 的解决方案——相反，我必须修改它才能访问this.series.symbol.

The symbols that appear in the switch statement are being rendered from their UTF-8 Geometric Shapes codesso it is necessary to structure the switch statements in the following fashion symbol = 'charactercodegoeshere';.(ex: symbol = '&#9679'; in the case of the circle character)

出现在 switch 语句中的符号是从它们的UTF-8 几何形状代码呈现的，因此有必要按以下方式构造 switch 语句symbol = 'charactercodegoeshere';。（例如：符号 = '●'; 在圆形字符的情况下）

The following code ultimately rendered the correct symbol in the correct color in the chart's tooltip for a given series:

以下代码最终在图表的工具提示中为给定系列以正确的颜色呈现正确的符号：

tooltip: {
    style: {
        padding: 10,
        fontWeight: 'bold'
    },
    useHTML: true,
    formatter: function () {

        var symbol;

        switch ( this.series.symbol ) {
            case 'circle':
                symbol = '&#9679';
                break;
            case 'diamond':
                symbol = '&#9670';
                break;
            case 'square':
                symbol = '&#9632';
                break;
            case 'triangle':
                symbol = '&#9650';
                break;
            case 'triangle-down':
                symbol = '&#9660';
                break;
        }

        return Highcharts.dateFormat('%B %Y', this.x) + '<br/>' + '<span style="color:' + this.series.color + '; font-size: 1.5em;">' + symbol + '</span> ' + this.series.name + ': ' + this.y;
    }
}

The Highcharts.dateFormat() method was used to format epoch-millisecond timestamps for display.

Highcharts.dateFormat() 方法用于格式化要显示的纪元毫秒时间戳。

Answer 3

回答by Kacper Madej

You can do it like this: http://jsfiddle.net/fspzj4xw/

你可以这样做：http: //jsfiddle.net/fspzj4xw/

tooltip: {
            formatter: function () {
                var s = '<b>' + this.x + '</b>';

                $.each(this.points, function () {
                    s += '<br/>' + '<span style="color:' + this.series.color + '"> ●?▲▼■ </span>' + ' ' + this.series.name + ': ' + this.y + 'm';
                });

                return s;
            },
            shared: true
        },

Answer 4

回答by Torstein H?nsi

A lightweight solution would be to hook up to the Series afterInitevent and add the symbols:

一个轻量级的解决方案是连接到系列afterInit事件并添加符号：

Highcharts.addEvent(Highcharts.Series, 'afterInit', function() {
    this.symbolUnicode = {
        circle: '●',
        diamond: '?',
        square: '■',
        triangle: '▲',
        'triangle-down': '▼'
    }[this.symbol] || '●';
});

View live demo: http://jsfiddle.net/pjqz79pv/1/

查看现场演示：http: //jsfiddle.net/pjqz79pv/1/

javascript 如何从工具提示格式化程序显示 highchart 系列线标记符号？

提问by Sas

回答by James Donnelly

Pulling the relevant symbol into our tooltip

将相关符号拉入我们的工具提示

Adding colour

添加颜色

Ensuring the symbol exists

确保符号存在

Handling custom marker images

处理自定义标记图像

回答by Lauren O.

回答by Kacper Madej

回答by Torstein H?nsi

相关推荐

最近更新

标签

javascript 如何从工具提示格式化程序显示 highchart 系列线标记符号？

提问by Sas

回答by James Donnelly

Pulling the relevant symbol into our tooltip

将相关符号拉入我们的工具提示

Adding colour

添加颜色

Ensuring the symbol exists

确保符号存在

Handling custom marker images

处理自定义标记图像

回答by Lauren O.

回答by Kacper Madej

回答by Torstein H?nsi

相关推荐

javascript 如何实现浏览器标签被复制

使用 JavaScript 清除 Firefox 中的控制台

javascript 我可以要求浏览器不在元素中运行 <script> 吗？

javascript Angularjs 路由：无法读取未定义的属性“路径”

相关推荐

最近更新

标签