Совместное позиционирование всплывающей подсказки для Highcharts, если используется только одно значение

1

Если вы видите пример ниже, когда вы наводите курсор на точки, всплывающая подсказка будет находиться слева от точки, за исключением случаев, когда вы наведите курсор на месяц "Июнь", где есть только одно значение.

Я пытаюсь показать всплывающую подсказку в той же позиции, когда я нахожусь на точке с несколькими значениями в одной точке, а также когда я наводил точку, имеющую только одно значение. (это общая всплывающая подсказка).

Любая идея, как я могу сделать одно значение всплывающей подсказки, вести себя так же, как другие?

http://jsfiddle.net/2paj7L0h/ или фрагмент ниже:

Highcharts.chart('container', {
	  
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
                                 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
		plotOptions: {
    series: {
    	connectNulls: true
      }
    },
    tooltip: {
        shared: true,
        crosshairs: true
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
        data: [216.4, 194.1, 95.6, 54.4, 29.9, null, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]
    }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>
  • 1
    Вы должны быть в состоянии использовать tooltip.positioner для правильного позиционирования подсказки: jsfiddle.net/2paj7L0h/1
  • 0
    Вы также можете отключить общий доступ, использовать средство форматирования и цикл внутри, чтобы найти все точки с одинакового x. В результате вы сохраните позицию и все точки в одном всплывающем окне.
Показать ещё 3 комментария
Теги:
tooltip
highcharts

2 ответа

1
Лучший ответ

Как я уже упоминал в своем комментарии, вы должны иметь возможность использовать tooltip.positioner для позиционирования вашей подсказки рядом с вашими точками:

http://api.highcharts.com/highcharts/tooltip.positioner

  tooltip: {
    shared: true,
    crosshairs: true,
    positioner: function(labelWidth, labelHeight, point) {
      var x;
      if (point.plotX - labelWidth / 2 > 0) {
        x = point.plotX - labelWidth / 2;
      } else {
        x = 0
      }
      return {
        x: x,
        y: point.plotY
      }
    },
    shape: 'square'
  },

Живой пример: http://jsfiddle.net/2paj7L0h/2/

Поделиться
0

Это потому, что вы поместили null значение в июньский месяц второго массива данных, если вы поместили правильное значение, месяц будет правильно соответствовать

Highcharts.chart('container', {
	  
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
                                 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
		plotOptions: {
    series: {
    	connectNulls: true
      }
    },
    tooltip: {
        shared: true,
        crosshairs: true
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
        data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]
    }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>
Поделиться
  • 0
    нет, я думаю, я не объяснил это хорошо. Это на самом деле моя точка зрения. если одна из точек не имеет значения / null, я все же хочу, чтобы подсказка была расположена там, где она обычно находится
  • 0
    @wsgg хорошо, но если вы поставите значение NULL, вы не сможете отобразить значение как другие, вы можете рассчитать, какое значение будет идти в том месте, где вы положили NULL, чтобы можно было показать значение
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню