Highcharts散布:在绘图中显示值

Question

我有这个HighchartsScatter:

$('#container').highcharts({
    chart: {
        type: 'scatter'
    },
    title: {
        text: 'Title'
    },
    xAxis: {
        title: {
            text: 'Frequency (%)'
        }
    },
    yAxis: {
        title: {
            text: 'Current (%)'
        }
    },
    tooltip: {
        headerFormat: '<b>{series.name}</b><br>',
        pointFormat: '{point.x:.2f}% frequency, {point.y:.2f}% current: xx % efficiency'
    },
    plotOptions: {
        spline: {
            marker: {
                enabled: true
            }
        }
    },
    series: [{
        name: 'Data points',
        data: [
            [10, 25, 96.1],
            [50, 25, 96.3],
            [10, 50, 96.0],
            [50, 50, 96.3],
            [90, 50, 96.4],
            [100, 50, 96.5],
            [10, 100, 96.1],
            [50, 100, 96.3],
            [90, 100, 96.5],
            [100, 100, 96.6]
        ]
    }]
});

对于每个数据点,我提供了三个值.例如,x = 10,y = 25,值= 96.1.我想在点旁边的情节中显示该值.我怎样才能做到这一点？

看我的JSFiddle.

Answer 1

目前您的值只是被丢弃,因为scatter只使用x和y.为了保持值,您可以将点作为对象提供series.data,如下所示:

series: [{
    name: 'Data points',
    data: [
        {x:10, y:25, value:96.1},
        {x:50, y:25, value:96.3},
        {x:10, y:50, value:96.0},
        //...
    ]
}]

然后你可以使用内置dataLabels来显示该点旁边的值,如下所示:

plotOptions: {
    scatter: {
        dataLabels: {
            enabled: true,
            formatter: function() {
                return this.point.value;
            }
        }
    }
}

看看JSFiddle演示了它的外观.