web-dev-qa-db-ja.com

ツールチップフォーマッタからハイチャートシリーズのラインマーカーシンボルを表示する方法

デフォルトでは、ハイチャートはツールチップにラインマーカーシンボルを表示します。

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

デフォルトのシナリオのように、フォーマッターからシリーズ名の前に円記号を追加したいと思います。

javascripthighchartstooltiplinegraph
16
Sas

私は自分の答えをここに投稿します Kacper Madejの答え ここでは実際には質問に答えていません。これは、Highchartsが使用する5つの異なるシンボルを同じツールチップに配置するだけです。

Other Answer Demo

この回答は複数の色を使用している場合は機能しますが、すべてのシリーズが同じ色である場合は完全に失敗します。それらをまったく表示しないこともできます。

関連するシンボルをツールチップに取り込む

Example TooltipJSFiddleデモ

Highchartsは、symbolNameオブジェクト自体のプロパティ自体であるgraphicオブジェクト内の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;
_

色を追加する

Coloured SymbolJSFiddleデモ

次に、これをポイントの色に拡張して、シリーズの色と一致させることができます。これは単に、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変数を空の文字列（_''_）として定義して、ツールチップにndefinedとして表示されないようにすることもできます。

_var symbol = '';
_

カスタムマーカー画像の処理

Image Marker ExampleJSFiddleデモ

この例では、次の画像を使用しました： Example Image Marker

この解決策はこの質問に対してうまく機能しますが、カスタムマーカー画像を処理するときに落ちることは注目に値します-これらが使用される場合、graphicオブジェクトまたはsymbolNameプロパティはなく、独自の画像を使用しているため、とにかく上の図形を表示したい。

まず、ツールチップ内でHTMLを使用することをHighchartsに伝えます。これを行うには、tooltipオブジェクトで_useHTML: true_を指定します。

_tooltip: {
    formatter: function() { ... },
    useHTML: true
}
_

幸い、HighchartsのツールチップはHTMLの_<img />_要素をサポートしており、_this.point.marker.symbol_を使用してsymbolオブジェクト内のmarkerプロパティを通じてカスタム画像のURLを取得できます。

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

2番目のハードルは、実際の画像URLを囲んでいる_url(_および_)_を削除することです。このために、正規表現を使用して、削除するビットを照合できます。私が使用した正規表現は/^url\(|\)$/gで、次のように視覚化されます。

Regexper Example

最後のgは、一致をプルすることを示しているので、_url(_と_)_の両方を1回の不正な方法で置き換えることができます。

_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 ) { ... }
_
37
James Donnelly

私はこれが古いスレッドであることを確認できますが、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ステートメントに表示されるシンボルは、それらの TF-8 Geometric Shapesコード からレンダリングされているため、switchステートメントを次のように構成する必要がありますsymbol = 'charactercodegoeshere';。（例：記号= '＆＃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（）メソッドを使用して、エポックミリ秒のタイムスタンプを表示用にフォーマットしました。

5
Lauren O.

次のように実行できます： 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
        },
3
Kacper Madej

軽量なソリューションは、Series afterInitイベントにフックしてシンボルを追加することです：

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

ライブデモを見る： http://jsfiddle.net/pjqz79pv/1/

1
Torstein Hønsi