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

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's answer这里根本没有真正回答这个问题，它只是将Highcharts使用的5个不同符号放在同一个工具提示中：

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

Example Tooltip JSFiddle demo

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

"circle"●
"diamond"♦
"square"■
"triangle"▲
"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;

添加颜色

Coloured Symbol JSFiddle demo

然后我们可以将其扩展为颜色，以匹配系列的颜色。这只需将我们的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 = '';

处理自定义标记图像

Image Marker Example JSFiddle demo

对于此示例，我使用了以下图片：

值得注意的是，尽管此解决方案适用于此问题，但在处理自定义标记图像时会崩溃 - 使用这些图像时，没有graphic对象或symbolName属性，以及因为我们使用自己的图像，所以我们不希望显示任何上面的任何形状。

首先要告诉Highcharts我们想在工具提示中使用HTML。我们可以通过在useHTML: true对象上指定tooltip来执行此操作：

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

幸运的是，Highcharts工具提示支持HTML <img />元素，并允许我们使用symbol通过marker对象中的this.point.marker.symbol属性提取自定义图片网址。

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

第二个障碍是移除实际图片网址周围的url(和)。为此，我们可以使用正则表达式来匹配我们要删除的位。我带的正则表达式是/^url$|$$/g，可视化为：

Regexper Example

最后的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属性。我选择在{em>确保符号存在部分中声明的原始else if语句之上作为if执行此操作：

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

Answer 2

你可以这样做：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 3

我可以看到这是一个较老的帖子，但由于Highcharts API在某些方面看起来有所不同，因为我在这里提供了一个更新，其中包含了对我有用的详细信息，以防这对其他人有用。 ..

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

switch语句中出现的符号是从UTF-8 Geometric Shapes codes呈现的，因此必须按以下方式symbol = 'charactercodegoeshere';构建switch语句。（例如： symbol ='＆amp;＃9679';在圆圈字符的情况下）

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

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（）方法用于格式化epoch-millisecond时间戳以供显示。

Answer 4

轻量级解决方案是连接到Series afterInit事件并添加符号：

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

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

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

4 个答案:

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

添加颜色

确保符号存在

处理自定义标记图像