如何在Highcharts数据标签或提示框中添加可编辑文本框？

在Highcharts的每个数据点上创建可编辑文本框，目前已能渲染文本框，但无法编辑。相关代码如下：

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Highcharts Editable Data Label</title>
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/modules/exporting.js"></script>
  <script src="https://code.highcharts.com/modules/export-data.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="container" style="width: 600px; height: 400px;"></div>
</body>
</html>

JS代码 #

Highcharts.AST.bypassHTMLFiltering = true;
$(document).ready(function(){
    // Sample data
    var data = [{
        name: 'Tokyo',
        y: 7,
        description: 'This is Tokyo'
    }, {
        name: 'New York',
        y: 8,
        description: 'This is New York'
    }, {
        name: 'London',
        y: 9,
        description: 'This is London'
    }];

    // Create the chart
    var chart = Highcharts.chart('container', {
        chart: {
            type: 'area'
        },
        title: {
            text: 'Highcharts Editable Data Label'
        },
        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    useHTML: true,
                    formatter: function() {
                        return '<b>' + this.point.name + '</b><br>Value: ' + this.y + '<br><input type="text" class="commentInput" placeholder="Enter comment" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px;">';
                    }
                },
                point: {
                    events: {
                        click: function () {
                            // Do something when a point is clicked
                            console.log('Point clicked:', this);
                        }
                    }
                }
            }
        },
        series: [{
            name: 'Cities',
            data: data
        }]
    });

    // Example event listener for input change
    $('#container').on('input', '.commentInput', function() {
        console.log('Input changed:', $(this).val());
    });
});

询问：是否可以在Highcharts的数据标签或提示框中创建可编辑文本框？

可以实现，问题出在你给input设置的绝对定位样式和Highcharts的事件拦截上，修正方案如下：

核心修改点 #

• 移除input的position: absolute等定位样式，避免脱离文档流导致无法聚焦
• 给数据标签添加allowOverlap: true，防止文本框被其他元素遮挡
• 保留已设置的Highcharts.AST.bypassHTMLFiltering = true，确保HTML元素能正常渲染

修正后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Highcharts Editable Data Label</title>
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/modules/exporting.js"></script>
  <script src="https://code.highcharts.com/modules/export-data.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="container" style="width: 600px; height: 400px;"></div>

<script>
Highcharts.AST.bypassHTMLFiltering = true;
$(document).ready(function(){
    var data = [{
        name: 'Tokyo',
        y: 7,
        description: 'This is Tokyo',
        comment: ''
    }, {
        name: 'New York',
        y: 8,
        description: 'This is New York',
        comment: ''
    }, {
        name: 'London',
        y: 9,
        description: 'This is London',
        comment: ''
    }];

    var chart = Highcharts.chart('container', {
        chart: {
            type: 'area'
        },
        title: {
            text: 'Highcharts Editable Data Label'
        },
        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    useHTML: true,
                    allowOverlap: true, // 允许标签重叠，避免被遮挡
                    formatter: function() {
                        // 移除绝对定位，使用默认布局
                        return `<b>${this.point.name}</b><br>Value: ${this.y}<br>
                                <input type="text" class="commentInput" placeholder="Enter comment" 
                                       style="width: 100px;" value="${this.point.comment}">`;
                    }
                },
                point: {
                    events: {
                        click: function () {
                            // 点击数据点时自动聚焦到对应输入框
                            $(this.dataLabel.div).find('.commentInput').focus();
                        }
                    }
                }
            }
        },
        series: [{
            name: 'Cities',
            data: data
        }]
    });

    // 监听输入框变化，同步更新到数据点的comment属性
    $('#container').on('input', '.commentInput', function() {
        var input = $(this);
        // 找到对应的Highcharts数据点
        var point = input.closest('.highcharts-data-label').data('point');
        if (point) {
            point.comment = input.val();
            console.log(`Updated ${point.name}'s comment:`, input.val());
        }
    });
});
</script>
</body>
</html>

额外说明 #

• 新增comment字段存储每个数据点的编辑内容，方便后续调用或保存
• 点击数据点时自动聚焦输入框，提升交互流畅度
• 如果要在提示框（tooltip）中实现可编辑文本框，思路一致：开启tooltip的useHTML，在formatter中返回input元素，同时处理焦点和数据同步逻辑

内容的提问来源于stack exchange，提问作者Hardik Doshi