Javascript Highcharts中是否有任何方法可以在散点图上自动显示标签/文本？

我想一个散点图，能够自动显示旁边的每个绘图点或气泡，一段文字识别它

---

任何帮助都将不胜感激

您需要数据中的名称，并在序列中添加dataLabel，请选中此项：

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"
        }]
    }]

---

示例：

您需要数据中的名称，并在序列中添加数据标签，请选中此项：

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"
        }]
    }]

---

示例：

我会将每个数据点创建为一个单独的系列，然后利用dataLabels选项：

 $('#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]]
        }
    ]
});

小提琴

---

我会将每个数据点创建为一个单独的系列，然后利用dataLabels选项：

 $('#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]]
        }
    ]
});

小提琴

---

非常感谢您的回复，这真是一种享受。快乐的开发者和众多快乐的客户即将到来；）谢谢如果数据是从JSON加载的，你知道如何做到这一点吗？也就是说，

函数

位只能作为字符串加载。哦，别担心。下面的答案解决了这个问题。需要注意的是，它使用的是键“format”，而不是这里的键“formatter”。非常感谢您的回复，它非常有用。快乐的开发者和众多快乐的客户即将到来；）谢谢如果数据是从JSON加载的，你知道如何做到这一点吗？也就是说，

函数

位只能作为字符串加载。哦，别担心。下面的答案解决了这个问题。只需要注意它使用的是键“format”，而不是这里的键“formatter”。