javascript - 在 highcharts 的气泡图中获取系列的名称

Question

下面是我的气泡图 JSON 数据。

{
 "chart":{"type":"bubble","plotBackgroundImage":"Image/bubble.jpg"},
 "plotOptions":{"series":{"dataLabels":{"enabled":true}}},
 "series":
  [
   {"data":[{"x":7,"y":7,"z":49,"name":"Task 2"}]},
   {"data":[{"x":7,"y":8,"z":56,"name":"Task 4"}]},
   {"data":[{"x":7,"y":8,"z":56,"name":"Task 3"}]},
   {"data":[{"x":3,"y":7,"z":21,"name":"Task 1"}]}
  ]
 }

为简单起见，我减少了数据内容，下面是我的结果..

尽管有系列名称，但我想让相关气泡的名称与气泡一起出现，并观察到 ​​y 的数值显示在每个气泡上，不想有那个数字表示，也想修复背景图像固定大小。任何帮助将不胜感激。

--------更新的问题--------------

 string plotBackgroundImage = "Highcharts-3.0.7/graphics/Heatmap.jpg";
        var chart = new
        {
            type = ChartType,
            plotBackgroundImage

        };
        var dataLabels = new
        {
            enabled = true
        };
        var plotOptions = new
        {
            series = new { dataLabels = dataLabels }
        };
        var series = dataList;
        var obj = new { chart, plotOptions, series };
        string result = jSearializer.Serialize(obj);

并且我的 JSON 数据存储在字符串中，并且我将此数据直接传递给 Highchart API 以绘制图形，现在我想如何传递格式化程序函数任何人都可以解释或任何其他方式来实现这个目标。

Answer 1

在工具提示格式化程序中，您可以访问与该点相关的所有选项。

我认为它也适用于这种情况。

这是一个示例。

tooltip:{
    formatter: function(){
        var name = this.point.options.name;
        return name + ' x : ' + this.x + " y: " + this.y
    }
}

我希望这能帮到您。

Answer 2

使用tooltip.pointFormat，这是一个工具提示的模式，它的选项有限，但是 point.name 会起作用，看看：http: //jsfiddle.net/bJtCt/

$('#container').highcharts({

    chart: {
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    tooltip: {
        shared: true,
        useHTML: true,
        headerFormat: '<table>',
        pointFormat: '<tr><td style="color: {series.color}">{point.name}: </td>' +
        '<td style="text-align: right"><b>{point.y} EUR</b></td></tr>',
        footerFormat: '</table>',
        valueDecimals: 2
    },

    series: [{
        name: 'Short',
        data: [{
            x: 3, y: 15, name: 'test'
        }, {
            x: 5, y: 17, name: 'testing'   
        }]
    }]

});