Question

当我从图表中删除第一个系列时，即chart.series [0] .remove（）; 其他系列的图例属性未更新。即删除系列0后，系列1的图例不知道他在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中其他系列的图例属性

2 个答案: