web-dev-qa-db-ja.com

HighCharts：ツールチップ上に表示されるラベル

グラフのラベルがツールチップの上に表示されていますが、見栄えがよくありません。 zIndexを試してみましたが、結果は出ませんでした。ツールチップを透明にするにはどうすればよいですか？これが私のjsFiddleです： http://www.jsfiddle.net/4scfH/3/

$(function() {
  var chart;
  $(document).ready(function() {
    chart = new Highcharts.Chart({
      chart: {
        renderTo: 'graf1',
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false
      },

      title: {
        margin: 40,
        text: 'Podíl všech potřeb'
      },
      tooltip: {
        //pointFormat: '<b>{point.y} Kč [{point.percentage}%]</b>',
        percentageDecimals: 2,
        backgroundColor: "rgba(255,255,255,1)",
        formatter: function() {
          return this.point.name + '<br />' + '<b>' + Highcharts.numberFormat(this.y).replace(",", " ") + ' Kč [' + Highcharts.numberFormat(this.percentage, 2) + '%]</b>';
        }
      },
      plotOptions: {
        pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          dataLabels: {
            enabled: true,
            color: '#000000',
            connectorWidth: 2,
            useHTML: true,
            formatter: function() {
              return '<span style="color:' + this.point.color + '"><b>' + this.point.name + '</b></span>';
            }
          }
        }
      },
      series: [{
        type: 'pie',
        name: 'Potřeba',
        data: [
          ['Firefox', 45.0],
          ['IE', 26.8], {
            name: 'Chrome',
            y: 12.8,
            sliced: true,
            selected: true
          },
          ['Safari', 8.5],
          ['Opera', 6.2],
          ['Others', 0.7]
        ]
      }]
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="graf1" style="width: 400px; height: 250px; float:left"></div>
javascriptjqueryhighchartstooltiplabels
17
Michal S

useHTML を設定し、CSSを介して独自のツールチップを定義できます。

http://jsfiddle.net/4scfH/4/

tooltip: {
    borderWidth: 0,
    backgroundColor: "rgba(255,255,255,0)",
    borderRadius: 0,
    shadow: false,
    useHTML: true,
    percentageDecimals: 2,
    formatter: function () {
        return '<div class="tooltip">' + this.point.name + '<br />' + '<b>' + Highcharts.numberFormat(this.y).replace(",", " ") + ' Kč [' + Highcharts.numberFormat(this.percentage, 2) + '%]</b></div>';
    }
},

CSS

.label {
    z-index: 1 !important;
}

.highcharts-tooltip span {
    background-color: white;
    border:1 px solid green;
    opacity: 1;
    z-index: 9999 !important;
}

.tooltip {
    padding: 5px;
}

説明：useHTMLをtrueに設定すると、ツールチップのテキストがHTMLレイヤーにHTMLとして表示されますが、ボックスと矢印のハイグラフ表示SVGにSVG形状が描画されます。データチップはツールチップの上に描画されているように見えますが、ツールチップテキスト自体はデータラベルの上に表示されます。上記の設定オプションは、SVGツールチップの形状を効果的に隠し、ツールチップを純粋にHTML/CSSで構築およびスタイル設定します。唯一の欠点は、小さな「矢印」ポインターを失うことです。

28
Sebastian Bochan

Tooltip.backgroundColorを「rgba（255,255,255,1）」に設定すると、「透明度なし」のツールチップが表示されます

パイの設定でuseHTML：trueを削除する必要があります。

あなたのjsfiddleのフォーク： http://jsfiddle.net/kairs/Z3UZ8/1/

tooltip: {
  backgroundColor: "rgba(255,255,255,1)"
}

ハイチャートのドキュメント

5
Kai-Rune

私も同じ問題を抱えていました。ラベルはツールチップの上に表示されていました。ラベルのuseHTML = trueを削除するとうまくいきました。

2
Sushil Mahajan

同じ問題がありました。私の解決策。ツールチップ-useHTML = true。ツールチップ-フォーマッタ= 1つのdivコンテナを持つHTMLコード。ここで、CSSでは負の値のマージンが重要です。

tooltip: {
    backgroundColor: "rgba(255,255,255,1)",
    useHTML: true,
    formatter: function() {
        var html = [];
        html.Push('<b>Correlation to ' + this.point.p + '</b><br>');
        if (null != this.point.associatedPoints 
                && typeof this.point.associatedPoints != 'undefined' 
                && this.point.associatedPoints.length > 0) {
            $.each(this.point.associatedPoints, function(i, associatedPoint) {
                html.Push('Responses: ' + associatedPoint.nFormatted);
            });
        }
        return '<div class="tooltip-body">' + html.join('') + '</div>';
    }

CSS：

.highcharts-tooltip span {
    z-index: 9999 !important;
    top:2px !important;
    left:2px !important;
}
.highcharts-tooltip span .tooltip-body{
    background-color:white;
    padding:6px; 
    z-index:9999 !important;
    margin-bottom:-14px;
    margin-right:-14px;
}
2
JPM

そして、useHTMLに存在する問題を回避したくない場合は、svgでそれを行う方法を次に示します。

 Highcharts.wrap(Highcharts.Chart.prototype, 'redraw', function(proceed, animation) {
  proceed.call(this, animation);
  try {
   if (this.legend.options.floating) {
    var z = this.legend.group.element, zzz = z.parentNode;
    zzz.removeChild(z);
    zzz.appendChild(z); //zindex in svg is determined by element order
   }
  } catch(e) {

  } 
 });
1
Cine

HTML形式のHighchartツールチップの場合

ハイチャート構成

tooltip: {
    borderWidth: 0,
    backgroundColor: "rgba(255,255,255,0)",
    shadow: false,
    useHTML: true
    ........
},

CSS：

.highcharts-tooltip>span {
    background-color: #fff;
    border: 1px solid #172F8F;
    border-radius: 5px;
    opacity: 1;
    z-index: 9999!important;
    padding: .8em;
    left: 0!important;
    top: 0!important;
}

Screenshot

0
SanS

私はまだ周りのソリューションのいくつかに問題があり、.tooltipにz-index：999を設定しても、さまざまなコンテナーdivが原因で効果がありませんでした。しかし、これがうまく機能することを発見しました（凡例とツールチップがHTMLの場合）。他のz-indexを設定する必要はありません：

.highcharts-legend { z-index: -1; }

0
mr_than