3

ハイチャートを使用して、ツールチップの背景色を線の色と一致させようとしています。

私はこれを処理するための最も合理的なネイティブな方法を見つけようとしています -<div />フォーマッタに背景色を追加することを避けることができれば、それは素晴らしいことですが、そうでなければそれもうまくいくと思います.

線の色と量は大きく変わるので、線の色と同じように背景色をハードコーディングしたくありません.線の色と同じように背景を描くことができれば、それは素晴らしいことです.

私の唯一のアイデアはうまくいきませんでした。この場合、これらの関数の範囲がどうなるかわかりません:

tooltip : {
    backgroundColor: function() {
        return this.line.color;
        //return this.point.color;
    }
}

私の線の色は正常に設定されています：

series : [
    {
        color : '#fa0'
    }
]

何か案は？

前もって感謝します。

4

3 に答える 3

6

フォーマッターを使用する以外の方法でこれを設定することはできません。このようなものだけ: http://jsfiddle.net/GGQ2a/2/

JS:

tooltip: {
        useHTML: true,
        backgroundColor: null,
        borderWidth: 0,
        shadow: false,
        formatter: function(){
            return '<div style="background-color:' + this.series.color + '" class="tooltip"> ' +
                    this.series.name + '<br>' + this.key + '<br>' + this.y +
                '</div>';
        }
    },

そしてCSS：

.tooltip {
  padding: 5px;
  border-radius: 5px;
  box-shadow: 2px 2px 2px; 
}
于 2013-09-11T13:31:42.047 に答える
0

古い質問ですが、これを行う別の方法は、tooltipRefreshイベントをフックして、いくつかのjquery. 作業コード:

$(function () {
    $('#container').highcharts({
        chart: {
            type:'column',
            events: {
            tooltipRefresh: function(e) {
              if (!e.target.hoverSeries) return;
              $('.highcharts-tooltip>path:last-of-type')
                .css('fill', e.target.hoverSeries.color);
            }
          }
        },
        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: [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: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

于 2016-07-30T19:35:57.900 に答える