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

Question

Я хочу добавить дополнительную информацию в столбцы на втором уровне развертки. Например, для «материала 1» в «Категории 1» я хочу показать список из 4 элементов (текст), затем в «материале 2» в «Категории 1» я хочу показать список из 6 элементов (текст).

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

http://jsfiddle.net/7qv6x3pj/

$(function () {
    $('#container').highcharts({
                chart: {
                    type: 'column'
                },
                title: {
                    text: "Title 1"
                },
                xAxis: {
                    type: 'category'
                },
                yAxis: {
                    title: {
                        text: 'Stuff'
                    }
                },
                colors: [
                    '#1b6601',
                    '#2dae01',
                    '#BBDDA5',
                    '#FF0',
                    '#f20808'
                ],
                series: [{
                    name: "Title",
                    colorByPoint: true,
                    data: [
                        {
                            name: "Category 1",
                            y: 3,
                            drilldown: "cat1"
                        },
                        {
                            name: "Category 2",
                            y: 4,
                            drilldown: "cat2"
                        },
                        {
                            name: "Category 3",
                            y: 7,
                            drilldown: "cat3"
                        }
                    ]
                }],
                drilldown: {
                    series: [
                        {
                            name: "Category 1",
                            id: "cat1",
                            data: [
                                [
                                    "stuff 1",
                                    4
                                ],
                                [
                                    "stuff 2",
                                    6
                                ],
                                [
                                    "stuff 3",
                                    5
                                ],
                                [
                                    "stuff 4",
                                    6
                                ]
                            ]
                        },
                        {
                            name: "Category 2",
                            id: "cat2",
                            data: [
                                [
                                    "stuff 1",
                                    4
                                ],
                                [
                                    "stuff 2",
                                    9
                                ],
                                [
                                    "stuff 3",
                                    4
                                ]
                            ]
                        },
                        {
                            name: "Category 3",
                            id: "cat3",
                            data: [
                                [
                                    "stuff 1",
                                    2
                                ],
                                [
                                    "stuff 2",
                                    5
                                ],
                                [
                                    "stuff 3",
                                    4
                                ]
                            ]
                        }]
                }
        });
});

Answer 1

Вы можете достичь этого, используя tooltip.formatter и дополнительное свойство, сохраненное в точечном объекте. Проверьте демо и код, указанный ниже.

Код:

tooltip: {
  formatter: function() {
    if (this.point.tooltipInfo) {
      return 'Something: <br>- ' + this.point.tooltipInfo.join('<br>- ');
    }

    return this.y;
  }
},
drilldown: {
  series: [{
    name: "Category 1",
    id: "cat1",
    data: [{
        name: "stuff 1",
        y: 4,
        tooltipInfo: ['aaa', 'bbb', 'ccc', 'ddd']
      },
      {
        name: "stuff 2",
        y: 6,
        tooltipInfo: ['aaa', 'bbb', 'ccc', 'ddd', 'eee', 'fff']
      },
      [
        "stuff 3",
        5
      ],
      [
        "stuff 4",
        6
      ]
    ]
  }]
}

Демо:

• http://jsfiddle.net/BlackLabel/vjoprc7t/

Справочник по API:

• https://api.highcharts.com/highcharts/tooltip.formatter