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

Question

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

var options = {
  chart: {
    renderTo: 'container',
    type: 'scatter',
    plotBorderWidth: 1,
    zoomType: 'xy'
  },
  legend: {
    enabled: false
  },

  tooltip: {
                headerFormat: '<b>{series.name}</b><br>',
                pointFormat: 'First: {point.x}, Second: {point.y}'
            }, 


  xAxis: {
        gridLineWidth: 0,
        type: 'datetime',
        dateTimeLabelFormats: {
           day: '%m/%d'    //ex- 01 Jan 2016
        }
    },
yAxis: {
        gridLineWidth: 0,
        plotLines: [
                        {
                value:2019,
                color: 'grey',
                /* dashStyle: 'shortdash', */
                width: 0.5},
                {
                value:2018,
                color: 'grey',
                /* dashStyle: 'shortdash', */
                width: 0.5},

                ]
    },

  plotOptions: {
    scatter: {
      dataLabels: {
        enabled: false
      },
    },
   },

  series: [{}],
}

var data = {
  "other": [
    {
      "y": 2018,
      "x": "03/22/19",
      "contact_notes": "aa"
    },
    {
      "y": 2019,
      "x": "06/22/19",
      "contact_notes": "bb"
    },
    {
      "y": 2019,
      "x": "09/06/19",
      "contact_notes": "cc"
    }
  ],
}


var data2 = data['other']

data2.forEach(function(point) {
  point["x"] = new Date(point["x"]).getTime();
});

options.series[0].data = data2;
options.series[0].name = 'other'
options.series[0].color =  '#b20000' 

var chart = new Highcharts.Chart(options);

Если вы посмотрите на мой объект данных, у него есть ключ с именем contact_notes, я быхотелось бы видеть эти данные (то есть см. «aa», «bb», «cc») в дополнение к точкам x и y, когда я наведу курсор мыши на три точки данных на графике

Любая помощь будетбыть высоко ценится.Спасибо

Answer 1

Вы можете использовать опцию pointFormat или formatter и получить пользовательское свойство с помощью point.contact_notes:

tooltip: {
    headerFormat: '<b>{series.name}</b><br>',
    pointFormat: 'First: {point.x}, Second: {point.y}, Third: {point.contact_notes}'
}

---

Демонстрационная версия: http://jsfiddle.net/BlackLabel/b2v6jfpt/

Справочник по API: https://api.highcharts.com/highcharts/tooltip.pointFormat

Answer 2

Пользовательские свойства заканчиваются в опциях на точке, т.е. это будет работать:

pointFormat: 'First: {point.x}, Second: {point.y}, Third: {point.options.contact_notes}'