Question

如何在点击其中一个馅饼时在饼图外部保留工具提示。

这个想法是，在饼图中单击其中一个饼图时，将该饼图旋转到底部，工具提示应显示在图表外部。它应该是一个单击事件，鼠标悬停不起作用。当我点击另一个时，工具提示信息应该会改变，就像悬停工作一样

$(function () {

function moveToPoint(clickPoint){
  var points = clickPoint.series.points;
  var startAngle = 0;
  for (var i = 0; i < points.length; i++){
    var p = points[i];
    if (p == clickPoint)
    {
      break;
    }
    startAngle += (p.percentage/100.0 * 360.0);
  }
  clickPoint.series.update({
    //startAngle: -startAngle + 180 // start at 180
    startAngle: -startAngle + 180 - ((clickPoint.percentage/100.0 * 360.0)/2) // center at 180
  });
}

$('#container').highcharts({
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: 1,//null,
        plotShadow: false
    },
    title: {
        text: 'Browser market shares at a specific website, 2014'
    },
    tooltip: {
        formatter:function(){
        $('#tooltip').html(this.y);
        }
    },
    plotOptions: {
        pie: {
            cursor: 'pointer',
            dataLabels: {
                enabled: false
            },
            point:{
              events:{
                click: function(){
                  moveToPoint(this);
                }
              }
            }
        }
    },
    series: [{
        type: 'pie',
        name: 'Browser share',
        data: [
            ['Firefox',   45.0],
            ['IE',       26.8],
            ['Chrome',    12.8],
            ['Safari',    8.5],
            ['Opera',     6.2],
            ['Others',   0.7]
        ]
    }]
}, 
function(){
  var maxPoint = null;
  $.each(this.series[0].points, function(i,j){
    if (maxPoint === null || j.percentage > maxPoint.percentage){
      maxPoint = j;
    }
  });
  moveToPoint(maxPoint);
});

}）;

http://jsfiddle.net/highcharts/8VTTH/

  (function (H) {
H.wrap(H.Tooltip.prototype, 'refresh', function (proceed, point, e) {
    if (e.type !== 'mousemove') {
        proceed.call(this, point, e);
    }
});
H.addEvent(H.Point.prototype, 'click', function (e) {
    e.point.series.chart.tooltip.refresh(e.point, e);
});

}（Highcharts））;

如何将第二个小提琴部分与第一部分整合在一起。

Highcharts - 点击时在饼图外保留工具提示

0 个答案: