web-dev-qa-db-ja.com

ツールチップフォーマッタを使用し、グラフの色を表示する方法（デフォルトで使用する方法）

デフォルトのHighchartsツールチップを使用している場合、グラフデータの色の円が表示されます（ http://jsfiddle.net/WOUNDEDStevenJones/mpMvk/1/ の明るい/暗い青色の円） ：

tooltip with colored dots

ただし、ツールチップでカスタム書式設定を使用する場合（ http://jsfiddle.net/WOUNDEDStevenJones/4vd7J/ ）、色は表示されません。

customized tooltip without dots

カスタム形式のツールチップでその色をどのように取得/使用しますか？私が知ることができることから、彼らのドキュメントには何もありません（ http://api.highcharts.com/highcharts#tooltip.formatter ）。これをカスタムフォーマットのツールチップで使用する方法を説明しています。

これにより、デフォルトでツールチップにデータの色が表示されます。

tooltip: {
    shared: true
}

しかし、これはそうではありません：

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

        $.each(this.points, function(i, point) {
            s += '<br/>'+ point.series.name +': '+
                    point.y +'m';
        });

        return s;
    },
    shared: true
},
jqueryhighcharts
32
WOUNDEDStevenJones

このドキュメントを見つけました（ http://api.highcharts.com/highcharts#tooltip.pointFormat ）。使用しているHTMLは、フォーマッタではなくpointFormatの下にあります。

<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b><br/>

ツールチップで色付きの円を取得するために使用する更新されたコードは次のとおりです。

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

        $.each(this.points, function(i, point) {
            s += '<br/><span style="color:' + point.color + '">\u25CF</span> ' + point.series.name + ': ' + point.y;
        });

        return s;
    },
    shared: true
},
48
WOUNDEDStevenJones

WOUNDEDStevenJones answerで改善しますが、jQuery固有ではないソリューションを使用します。

PointFormatで次のHTMLを模倣するには（ http://api.highcharts.com/highcharts#tooltip.pointFormat ）：

<span style="color:{series.color}">\u25CF</span>

ツールチップフォーマッタ関数用に、このjQueryに依存しないコードを作成しました。

formatter: function() {
    /* Build the 'header'.  Note that you can wrap this.x in something
     * like Highcharts.dateFormat('%A, %b %e, %H:%M:%S', this.x)
     * if you are dealing with a time series to display a more 
     * prettily-formatted date value.
     */
    var s = '<span style="font-size: 10px">' + this.x + '</span><br/>';

    for ( var i = 0; i < this.points.length; i++ ) {

        var myPoint = this.points[i];
        s += '<br/><span style="color:' 
             + myPoint.series.color
             + '">\u25CF</span>'
             + myPoint.series.name + ': ';

        /* Need to check whether or not we are dealing with an 
         * area range plot and display a range if we are
         */
        if ( myPoint.point.low && myPoint.point.high ) {

            s += myPoint.point.low + ' - ' + myPoint.point.high;

        } else {

            s += myPoint.y;

        }
    }

    return s;
},
shared: true
6
Mik Cox

ツールチップの主要部分を同じように表示し、x値のみを異なる形式にしたい場合は、代わりにheaderFormatプロパティを使用し、this.xではなくpoint.keyを使用できます。これにより、シリーズ本体を再現することなく同じことが実現します。

tooltip: {
    headerFormat: '<b>{point.key}</b><br/>'
}
3
VG1

次を使用できます。

> $.each(this.points, function () {
>   s += '<br/><span style="color:' + this.series.color + '">\u25CF</span>' + this.series.name + ': ' + '<b>' + this.y + '</b>';
> });
0
Renan Rocha