如何從工具提示格式化程序中顯示高級系列行標記符號？

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在其graphic對象中公開symbolName屬性，該屬性本身就是point對象本身的屬性。 它使用的形狀是：

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

有了這些信息，我們可以在tooltip.formatter()函數中構造一個switch語句，它將相關符號映射到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顏色的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。 我們可以通過在tooltip對象上指定useHTML: true ：

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

幸運的是，Highcharts工具提示支持HTML <img />元素，並允許我們使用this.point.marker.symbol通過marker對象中的symbol屬性提取自定義圖像URL。

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

你可以這樣做： 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的解決方案 - 而是我不得不修改它以訪問this.series.symbol 。

switch語句中出現的符號是從UTF-8 Geometric Shapes代碼中呈現的，因此必須按以下方式構造switch語句symbol = 'charactercodegoeshere'; 。 （例如：symbol ='＆＃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/