Highcharts 中的用户可编辑标题

Question

我想为 Highcharts 图表制作标题user-editable。用户应该能够点击标题并更改它，新标题应该保留并与图表一起导出。我发现很多关于以编程方式更改标题的讨论，但没有关于让用户更改它的讨论。这可能吗？

Answer 1

无法使用图表选项。我使用 JQuery 编写了一些代码，用于添加在单击标题时显示和隐藏的输入：

$(document).bind("enterKey", function (e) {

    $('.highcharts-title tspan').html($('#inputTitle').val());
    Highcharts.charts[0].options.title.text = $('#inputTitle').val();
    $('#inputTitle').css("visibility", "hidden");
});

$(document).keyup(function (e) {

    if (e.keyCode == 13) {
        $(this).trigger("enterKey");
    }
});

$('.highcharts-title').on("click", function () {

    $('#inputTitle').val($('.highcharts-title tspan').html());
    $('.highcharts-title tspan').html("");
    $('#inputTitle').css("visibility", "visible");
    $('#inputTitle').focus();
});

$('.highcharts-title').css('cursor', 'pointer');

keyup 函数用于定义输入提交的enter key。 enterkey bind中的第二行是导出问题。如果不更改图表选项中的标题，它不会显示在导出中。这是 DEMO.

Highcharts 中的用户可编辑标题

User Editable Title in Highcharts

highcharts