javascript - Is there any way in Highcharts to auto show LabelsText on a scatter chart? - Stack Overflow

admin管理员组

文章数量:1410730

I would like a scatter chart to be able to automatically show next to each PLOT point or BUBBLE, a piece of text identifying it.

Any Help would be very much appreciated !!

I would like a scatter chart to be able to automatically show next to each PLOT point or BUBBLE, a piece of text identifying it.

Any Help would be very much appreciated !!

• javascript
• highcharts

Share Improve this question Follow edited May 14, 2013 at 16:18 Lorenzo 79766 silver badges2727 bronze badges asked May 14, 2013 at 14:32 Robert PenderRobert Pender 2111 silver badge33 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

You need the name in the data, and add a dataLabel in series, check this:

series: [{
        dataLabels: {
            enabled: true,
            x:40,
            formatter:function() {
                return this.point.name;
            },
            style:{color:"black"}
        },
        data: [{
            "x": 23,
            "y": 22,
            "z": 200,
            "name":"point1"
        }, {
            "x": 43,
            "y": 12,
            "z": 100,
            "name":"point2"
        }]
    }]

Example: http://jsfiddle/tqVF8/

I would create each data point as a seperate series and then leverage the dataLabels option:

 $('#container').highcharts({

    chart: {
        type: 'scatter'
    },

    plotOptions: {            
        series: {
            dataLabels: {
                enabled: true,
                format: '{series.name}', // make it show the name
                x: 15, // place it on right side
                y: 10
            },
        }, 
        scatter: {
            marker: {
                radius: 10
            }
        }
    },

    series: [
        {
        name: 'A',
        data: [[Math.random() * 100, Math.random() * 100]]
        },
        {
        name: 'B',
        data: [[Math.random() * 100, Math.random() * 100]]
        },
        {
        name: 'C',
        data: [[Math.random() * 100, Math.random() * 100]]
        },
        {
        name: 'D',
        data: [[Math.random() * 100, Math.random() * 100]]
        },
        {
        name: 'E',
        data: [[Math.random() * 100, Math.random() * 100]]
        },
        {
        name: 'F',
        data: [[Math.random() * 100, Math.random() * 100]]
        },
        {
        name: 'G',
        data: [[Math.random() * 100, Math.random() * 100]]
        }
    ]
});

Fiddle here.

本文标签： javascriptIs there any way in Highcharts to auto show LabelsText on a scatter chartStack Overflow