chart.series[id].remove() 无法刷新 highcharts/highstock 中其他系列的图例属性

Question

当我从图表中删除第一个系列时，即 chart.series[0].remove(); 其他系列的图例属性不会更新。即系列 1 的传说在我删除系列 0 后不知道他在位置 0。

所以我的基本问题是我需要在删除系列后更新/所有系列图例。

我该怎么做？

更新#：我的场景：我有带有十字图标的图例（使用 html）。如果我点击关闭图标，该系列将被删除。如果我单击图例名称，将打开一个 jQuery 对话框，为您提供更新 yAxis 的功能，键入该特定系列。

图例格式化程序代码：

 legend: {
                                enabled: true,
                                useHTML: true,
                                labelFormatter: function test() {
                                    console.log("in label fomatter");
                                        console.log("in test");
                                        console.log(this);
                                    if (this.userOptions.yAxis == 0) {
                                        return "<input type=\"button\"onclick=\"updateSeries('"+this.index+"','"+this.userOptions.yAxis+"','"+this.userOptions.type+"')\" class=\"ui-widget\" value=\"" + this.name + " (RH)\"/> <input type=\"button\" onclick=\"removeSeries(" + this.index + ")\" class=\"ui-widget\" value=\" X \" />";
                                    } else if (this.userOptions.yAxis == 1) {
                                        return "<input type=\"button\"onclick=\"updateSeries('"+this.index+"','"+this.userOptions.yAxis+"','"+this.userOptions.type+"')\" class=\"ui-widget\" value=\"" + this.name + " (LH)\"/> <input type=\"button\" onclick=\"removeSeries(" + this.index + ")\" class=\"ui-widget\" value=\" X \" />";
                                    } else if (this.userOptions.yAxis == 2) {
                                        return "<input type=\"button\"onclick=\"updateSeries('"+this.index+"','"+this.userOptions.yAxis+"','"+this.userOptions.type+"')\" class=\"ui-widget\" value=\"" + this.name + " (3rd)\"/> <input type=\"button\" onclick=\"removeSeries(" + this.index + ")\" class=\"ui-widget\" value=\" X \" />";
                                    }
                                    return "";
                                }
                            },

删除系列的代码：

    function removeSeries(id) {
        console.log("in remove series");
        var chart = $('#container')
            .highcharts();
        chart.series[id].remove();
        chart.isDirtyLegend = true;
        chart.isDirtyBox = true;

        chart.legend.render();
        return;
    };

更新系列代码（我在点击图例时创建一个对话框）：

 function updateSeries(index, yAxis, type) {
                console.log("in update series");
                //console.log(chart.get())
                console.log("in update series"+index);
                var chart = $('#container')
                .highcharts();
                chart.isDirtyLegend = true;
                chart.isDirtyBox = true;
                chart.legend.render();
                console.log(chart.get("USSW1Y:3M Carry").index);
                $("#dialog")
                    .dialog("open");
                $("#legendTable")
                    .html("");
                $('#legendTable')
                    .append("<tr><td>Axis</td><td><select onchange=\"updateSeriesFromDialog(" + index + ")\" id=\"legendAxis\" name=\"legendAxis\"><option value=\"0\">1</option><option value=\"1\">2</option><option value=\"2\">3</option></select></td><td>Type</td><td><select onchange=\"updateSeriesFromDialog(" + index + ")\" id=\"legendType\" name=\"legendType\"><option value=\"line\">Line</option><option value=\"column\">Column</option><option value=\"bar\">Bar</option><option value=\"scatter\">Scatter</option><option value=\"area\">Area</option><option value=\"spline\">Spline</option><option value=\"areaspline\">Area Spline</option></select></td></tr>");
                $("#legendAxis").val(yAxis);
                $("#legendType").val(type);
                return;
            };

            function updateSeriesFromDialog(id){
                 var chart = $('#container').highcharts();
                 console.log("in update from Dialog series");
                 chart.series[id].update({
                     type: $("#legendType").val(),
                     yAxis: parseInt($("#legendAxis").val())
                });
            };

Answer 1

您应该可以在图表的图例上调用 render() 以重新呈现它：

chart.legend.render();

Answer 2

而不是基于索引，使用id 系列，演示：http://jsfiddle.net/14jL9no0/3/

因此，每个系列现在都有一个 ID：

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        id: "one",
        yAxis: 0
    }, {
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4].reverse(),
        id: "two",
        yAxis: 1
    }, {
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4].sort(),
        id: "three",
        yAxis: 2
    }]

现在，将该 ID 传递给您的方法：

 return "<input type=\"button\"onclick=\"updateSeries('" + this.index + "','" + this.userOptions.yAxis + "','" + this.userOptions.type + "')\" class=\"ui-widget\" value=\"" + this.name + " (3rd)\"/> <input type=\"button\" onclick=\"removeSeries('" + this.options.id + "')\" class=\"ui-widget\" value=\" X \" />";

最后一步，removeSeries可以从图表中得到系列：

function removeSeries(id) {
  console.log("in remove series");
  var chart = $('#container')
    .highcharts();
  chart.get(id).remove();

  return;
};

现在，您可以在更新系列时做同样的事情。不传递多个参数，只传递一个ID，然后使用chart.get(id)获取相应的系列。

chart.series[id].remove() 无法刷新 highcharts/highstock 中其他系列的图例属性

chart.series[id].remove() is not able to refresh legend properties of other series in highcharts/highstock

javascript

highcharts

highstock