Highcharts Polar, редактирование метки

Question

Highcharts.chart('container', {

  chart: {
  polar: true,
  type: 'line'
},

title: {
  text: 'Highcharts Polar Chart'
 },

 pane: {
   //size:'80%'
 },

  xAxis: {
   categories: ['passes_ratio', 'pass_verticality', 'shots', 'goals'],
  },

 yAxis: [{
   min: 0,
   max: 1,
   angle: 45
 }, {
   min: 0,
   max: 100,
   angle: 135
 }, {
  min: 0,
  max: 10,
  angle: 225
 }, {
  min: 0,
  max: 1,
  angle: 315
 }] ,

 series: [{
   data: [.8, .7, .6, .5],
   yAxis: 0
 }

Я создал диаграмму с библиотекой Highcharts, и я хочу изменить значения, которые появляются, когда мышь находится над точкой.

Например, для оси целей исходное значение равно 0,5 но я хочу, чтобы 5.7 отображалось без изменения реального значения.То же самое в остальных переменных.

Есть ли способ сделать это?Вот пример:

http://jsfiddle.net/atelei/aobf0zyr/

Answer 1

Вы можете использовать свойство formatter из tooltip, например:

tooltip: {
    formatter: function () {
        return 'The value for <b>' + this.x +
            '</b> is <b>' + (this.y + 0.7) + '</b>';
    }
},

Вот пример кода:

Highcharts.chart('container', {

  chart: {
    polar: true,
    type: 'line'
  },

  title: {
    text: 'Highcharts Polar Chart'
  },

  pane: {
    //size:'80%'
  },

  xAxis: {
    categories: ['passes_ratio', 'pass_verticality', 'shots', 'goals'],
  },

    tooltip: {
        formatter: function () {
            return 'The value for <b>' + this.x +
                '</b> is <b>' + (this.y + 0.7) + '</b>';
        }
    },
  yAxis: [{
    min: 0,
    max: 1,
    angle: 45
  }, {
    min: 0,
    max: 100,
    angle: 135
  }, {
    min: 0,
    max: 5,
    angle: 225
  }, {
    min: 0,
    max: 10,
    angle: 315
  }],

  series: [{
    data: [.8, .7, .6, .5],
    yAxis: 0
  }/*,{
    data: [11, 22, 33, 44],
    yAxis: 1
  }, {

    data: [1, 2, 3, 4],
    yAxis: 2
  }, {

    data: [2, 4, 6, .8],
    yAxis: 3
  }*/]
});

<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/exporting.js"></script>

<div id="container" style="min-width: 310px; max-width: 800px; height: 800px; margin: 0 auto"></div>