Как отобразить дополнительные данные во всплывающей подсказке пузырьковой диаграммы highcharts с осью x даты и времени

Я пытаюсь отобразить дополнительные данные во всплывающей подсказке пузырьковой диаграммы highcharts, но безуспешно. Как я могу получить доступ к this.point.comments внутри средства форматирования всплывающей подсказки?

Пузырьковая диаграмма, которую я использую, имеет дату и время в качестве оси X.

$('#chart-bubble').highcharts({

    chart: {
        type: 'bubble',
        zoomType: 'xy',
            plotBorderWidth: 1
    },

    title: {
        text: 'Risk & Profit Vs Date'
    },

       tooltip: {
        useHTML: true,
        formatter: function(){

            var expectedProfit = '';

            if( this.point.z !== 'none' )
            {
                expectedProfit = formatExpectedProfit(this.point.z);
            }

            var tooltip = '<table class="table table-bordered" style="width: 300px;"><tbody><tr><td colspan="2"><h5>'+this.series.name.substr(0,75)+'...</h5></td></tr>' +
            '<tr><td>Risk:</td><td>'+this.y+'</td></tr>';

            if( expectedProfit !== '' )
            {
                tooltip += '<tr><td>Profit:</td><td>'+expectedProfit+'</td></tr>';
            }
            else
            {
                tooltip += '<tr><td>Comments:</td><td>'+this.point.comments+'</td></tr>';
            }

            tooltip += '</tbody></table>';
            return tooltip;
        },
        followPointer: false
    },

        rangeSelector: {
        enabled:true
    },
        xAxis:{ 

            type: 'datetime',
            dateTimeLabelFormats: {
                day: '%e of %b'
            }

        },

        yAxis: {
            title: {
                text: 'Ri'
            }
        },

    series: prepareData(res.bubble)

});

Вот функция подготовки данных:

function prepareData(data)
{
    for( var i in data )
    {
        var item = data[i];

        for( var k in item.data )
        {
            var itemData = item.data[k];

            if( itemData[0] )
            {
                var split    = itemData[0].split("-");
                var y        = split[0];
                var m        = split[1]-1;
                var d        = split[2];

                itemData[0]  = Date.UTC(y,m,d);
                item.data[k] = itemData;
            }
        }

        data[i] = item;
    }

    return data;
}

И res.bubble json вернулся из PHP:

$list = array();
$list[]   = array('name'=>'project 1','color'=>'#FF0000','data'=>array(new \DateTime(),20,'none'),'pointInterval'=>86400000,'comments'=>'this is a comment');

//.... повторяем, добавляя в этот массив еще несколько элементов


highcharts bubble-chart
person meteorite    schedule 02.04.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете получить доступ ко всем дополнительным свойствам через point.options[/* property */.

Highcharts.chart('container', {

chart: {
    type: 'bubble',
},

tooltip: {
  formatter: function () {
    return this.point.options.comments[0];
  }
},

    series: [{
        data: [
            { x: 95, y: 95, z: 13.8, name: 'BE', comments: ['this is a comment'] },
        ]
    }]
});

пример: http://jsfiddle.net/yd1vjfmp/

person morganfree    schedule 03.04.2017
comment
Является ли point.options новым? У меня его нет, когда я пытаюсь получить к нему доступ. - person meteorite; 04.04.2017
comment
Убедитесь, что у вас правильная структура данных. Из того, что я вижу, вы определяете комментарии в параметрах серии, а не в параметрах точки. Таким образом, вы можете получить к нему доступ из series.options.comments — jsfiddle.net/yd1vjfmp/1. - person morganfree; 05.04.2017