18

チャートのラベルがツールチップの上に表示されていますが、見栄えがよくありません。で遊んでみまし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>

4

7 に答える 7

29
于 2013-02-28T10:00:36.243 に答える
6

tooltip.backgroundColor を "rgba(255,255,255,1)" に設定すると、"透明度なし" のツールチップが表示されます。

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

jsfiddle のフォーク: http://jsfiddle.net/kairs/Z3UZ8/1/

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

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

于 2014-01-08T12:01:37.263 に答える
4

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

于 2016-06-16T11:51:34.457 に答える
1

また、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) {

  } 
 });
于 2013-12-11T06:40:31.763 に答える
0

z-index: 999 を .tooltip に設定しても、さまざまなコンテナー div が原因で効果がありませんでした。しかし、これを設定するとうまく機能することがわかりました (凡例とツールチップが HTML の場合)。他の z-index を設定する必要もありません。

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

于 2016-02-11T04:51:07.500 に答える