如何从工具提示格式化程序中显示高级系列行标记符号？

Question

默认情况下,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/

使用工具提示格式化器,我们如何添加行标记符号？

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

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

Answer 1

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

如果我们使用多种颜色,这个答案确实有效,但如果我们所有的系列颜色都相同,它就会完全失败 - 你可能根本不会显示它们.

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

JSFiddle演示

Highcharts symbolName在其graphic对象中公开一个属性,该属性本身就是point对象本身的属性.它使用的形状是:

1. "circle" ●
2. "diamond" ♦
3. "square" ■
4. "triangle" ▲
5. "triangle-down" ▼

有了这些信息,我们可以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;
}

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

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

添加颜色

JSFiddle演示

然后我们可以将其扩展为颜色,以匹配系列的颜色.这只需要将我们包裹symbol在一个<span>元素中,然后将它style设置为系列的颜色,Highcharts通过它来完成this.series.color:

'<span style="color:' + this.series.color + '">' + symbol + '</span>';

确保符号存在

但是,在将其投入生产之前,您应该知道,有时会出现一个工具提示,其中既没有graphic对象也没有symbolName属性.当一个点存在于我们图表的可见边界之外时会发生这种情况 - 当悬停在线上时会出现工具提示,但该点本身不可见,因此不需要任何与图形相关的属性.

为了防止JavaScript错误,我们需要switch在以下if子句中包装我们的语句:

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

有了这个,你还想最初将你的symbol变量定义为一个空字符串(''),这样它就不会在我们的工具提示中显示为未定义:

var symbol = '';

处理自定义标记图像

JSFiddle演示

对于这个例子,我使用了以下图像:

值得注意的是,尽管此解决方案适用于此问题,但在处理自定义标记图像时会降低 - 当使用这些图像时,没有graphic对象或symbolName属性,并且因为我们正在使用我们自己的图像,所以我们不希望无论如何要显示上面的任何形状.

首先要告诉Highcharts我们想在工具提示中使用HTML.我们可以通过指定做到这一点useHTML: true我们的tooltip目标:

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

幸运的是,Highcharts工具提示支持HTML <img />元素,并允许我们使用对象中的symbol属性提取自定义图像URL .markerthis.point.marker.symbol

this.point.marker.symbol
-> "url(http://i.imgur.com/UZHiQFQ.png)"

第二个障碍是删除实际图像URL url(并将其)包围.为此,我们可以使用正则表达式来匹配我们要删除的位.我已经使用的正则表达式/^url\(|\)$/g,可视化为:

在g那个我们想拉任何比赛的最终状态,所以我们可以同时取代url(,并)在一个犯规一举:

var url = this.point.marker.symbol.replace(/^url\(|\)$/g, '');
-> "http://i.imgur.com/UZHiQFQ.png"

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

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

最后,我们希望确保marker对象和symbol属性存在.我选择这样做是作为在确保符号存在于上面的部分中声明else if的原始if声明之上:

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

Answer 2

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

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

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

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

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;
    }
}

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

Answer 3

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

\n\n

tooltip: {\n            formatter: function () {\n                var s = \'<b>\' + this.x + \'</b>\';\n\n                $.each(this.points, function () {\n                    s += \'<br/>\' + \'<span style="color:\' + this.series.color + \'"> \xe2\x97\x8f\xe2\x99\xa6\xe2\x96\xb2\xe2\x96\xbc\xe2\x96\xa0 </span>\' + \' \' + this.series.name + \': \' + this.y + \'m\';\n                });\n\n                return s;\n            },\n            shared: true\n        },\n

\n