HIGHCHART活动工具提示问题

Question

我正在使用高图活动表。但它的工具提示并没有显示在悬停位置。它总是以中心显示。我想在悬停系列上显示工具提示。

这是js fiddle悬停在任何系列上。

＆＃13;

＆＃13;

// Uncomment to style it like Apple Watch
/*
if (!Highcharts.theme) {
    Highcharts.setOptions({
        chart: {
            backgroundColor: 'black'
        },
        colors: ['#F62366', '#9DFF02', '#0CCDD6'],
        title: {
            style: {
                color: 'silver'
            }
        },
        tooltip: {
            style: {
                color: 'silver'
            }
        }
    });
}
// */

/**
 * In the chart render event, add icons on top of the circular shapes
 */
function renderIcons() {

  // Move icon
  if (!this.series[0].icon) {
    this.series[0].icon = this.renderer.path(['M', -8, 0, 'L', 8, 0, 'M', 0, -8, 'L', 8, 0, 0, 8])
      .attr({
        'stroke': '#303030',
        'stroke-linecap': 'round',
        'stroke-linejoin': 'round',
        'stroke-width': 2,
        'zIndex': 10
      })
      .add(this.series[2].group);
  }
  this.series[0].icon.translate(
    this.chartWidth / 2 - 10,
    this.plotHeight / 2 - this.series[0].points[0].shapeArgs.innerR -
    (this.series[0].points[0].shapeArgs.r - this.series[0].points[0].shapeArgs.innerR) / 2
  );

  // Exercise icon
  if (!this.series[1].icon) {
    this.series[1].icon = this.renderer.path(
        ['M', -8, 0, 'L', 8, 0, 'M', 0, -8, 'L', 8, 0, 0, 8,
          'M', 8, -8, 'L', 16, 0, 8, 8
        ]
      )
      .attr({
        'stroke': '#ffffff',
        'stroke-linecap': 'round',
        'stroke-linejoin': 'round',
        'stroke-width': 2,
        'zIndex': 10
      })
      .add(this.series[2].group);
  }
  this.series[1].icon.translate(
    this.chartWidth / 2 - 10,
    this.plotHeight / 2 - this.series[1].points[0].shapeArgs.innerR -
    (this.series[1].points[0].shapeArgs.r - this.series[1].points[0].shapeArgs.innerR) / 2
  );

  // Stand icon
  if (!this.series[2].icon) {
    this.series[2].icon = this.renderer.path(['M', 0, 8, 'L', 0, -8, 'M', -8, 0, 'L', 0, -8, 8, 0])
      .attr({
        'stroke': '#303030',
        'stroke-linecap': 'round',
        'stroke-linejoin': 'round',
        'stroke-width': 2,
        'zIndex': 10
      })
      .add(this.series[2].group);
  }

  this.series[2].icon.translate(
    this.chartWidth / 2 - 10,
    this.plotHeight / 2 - this.series[2].points[0].shapeArgs.innerR -
    (this.series[2].points[0].shapeArgs.r - this.series[2].points[0].shapeArgs.innerR) / 2
  );
}

Highcharts.chart('container', {

  chart: {
    type: 'solidgauge',
    height: '100%',

  },

  title: {
    text: '',
    style: {
      fontSize: '24px'
    }
  },

  tooltip: {
    positioner: function(labelWidth, labelHeight, point) {
      var tooltipX, tooltipY;
      console.log(point)
      tooltipX = point.plotX
      tooltipY = point.plotY
      return {
        x: tooltipX,
        y: tooltipY
      };
    },
    shadow: false,
    borderWidth: 0,
    backgroundColor: 'rgba(255,255,255,0.8)'
  },

  pane: {
    startAngle: 0,
    endAngle: 360,
    background: [{ // Track for Move
      outerRadius: '112%',
      innerRadius: '88%',
      backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0])
        .setOpacity(0)
        .get(),
      borderWidth: 0
    }, { // Track for Exercise
      outerRadius: '87%',
      innerRadius: '63%',
      backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1])
        .setOpacity(0)
        .get(),
      borderWidth: 0
    }, { // Track for Stand
      outerRadius: '62%',
      innerRadius: '38%',
      backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[2])
        .setOpacity(0)
        .get(),
      borderWidth: 0
    }]
  },

  yAxis: {
    min: 0,
    max: 100,
    lineWidth: 0,
    tickPositions: []
  },

  plotOptions: {
    solidgauge: {

      linecap: 'round',
      stickyTracking: false,
      rounded: true
    }
  },
  credits: false,

  series: [{
      name: 'Move',
      dataLabels: {
        enabled: true,
        borderWidth: 0,
        y: -105,
        x: -15,
        color: 'black',
        format: '{point.y}',
        style: {
          textTransform: 'uppercase'
        }
      },
      data: [{
        color: '#ed663f',
        radius: '100%',
        innerRadius: '95%',
        y: 90
      }]
    }, {
      name: 'Exercise',
      dataLabels: {
        enabled: true,
        borderWidth: 0,
        y: -85,
        x: -15,
        color: 'black',
        format: '{point.y}',
        style: {
          textTransform: 'uppercase'
        }
      },
      data: [{
        color: '#2cc6f2',
        radius: '80%',
        innerRadius: '75%',
        y: 65
      }]
    }, {
      name: 'Stand',
      dataLabels: {
        enabled: true,
        borderWidth: 0,
        y: -70,
        x: -15,
        color: 'black',
        format: '{point.y}',
        style: {
          textTransform: 'uppercase'
        }
      },
      data: [{
        color: '#fdb600',
        radius: '60%',
        innerRadius: '55%',
        y: 50
      }]
    }, {
      name: 'pushups',
      dataLabels: {
        enabled: true,
        borderWidth: 0,
        y: -50,
        x: -15,
        color: 'black',
        format: '{point.y}',
        style: {
          textTransform: 'uppercase'
        }
      },
      data: [{
        color: '#2cc6f2',
        radius: '40%',
        innerRadius: '35%',
        y: 44
      }]
    },
    {
      name: 'pullups',
      dataLabels: {
        enabled: true,
        borderWidth: 0,
        y: -30,
        x: -15,
        color: 'black',
        format: '{point.y}',
        style: {
          textTransform: 'uppercase'
        }
      },
      data: [{
        color: '#c88ef4',
        radius: '20%',
        innerRadius: '15%',
        y: 50
      }]
    }





  ]
});

＆＃13;

#container {
  margin: 0 auto;
  max-width: 250px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>

<div id="container"></div>

＆＃13;

＆＃13;

＆＃13;

谢谢

Answer 1

而是使用tooltip.positioner，您可以将tooltip.followPointer设置为true：

现场演示： http://jsfiddle.net/BlackLabel/mf87qcwv/

API参考： https://api.highcharts.com/highcharts/tooltip.followPointer