Question

我试图在highcharts气泡图工具提示中显示更多数据但没有成功。如何在工具提示格式化程序中访问this.point.com？

我使用的气泡图将日期时间设为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)

});

这是prepareData函数：

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');

// ....通过向此数组添加更多元素来重复

Answer 1

您可以通过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/

如何在日期时间x轴

1 个答案: