Question

我正在创建图表，底部有一个额外的图例，并带有导出功能。现在我有一个奇怪的效果：打开打印上下文菜单并选择其中一个下载选项（PNG / JPG / PDF / SVG）时，图表底部的菜单会重复。

var chart = new Highcharts.Chart({
chart: {
    renderTo: 'container'
},
xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},

navigation: {
    buttonOptions: {
        y: 50
    }
},

series: [
      { data: [45.9, 50.2, 45.5, 198.4, 50.2] },
      { data: [68.5, 176.0, 50.1, 123.2, 25.9] },
      { data: [176.4, 50.2, 186.9, 56.6, 58.3] }
    ]
},

function(chart){
    $(chart.series).each(function(i, serie){
        $('<li style="color: ' + serie.color + '">' + serie.name + '</li>').click(function(){
            serie.visible ? serie.hide() : serie.show();
        }).appendTo('#legend')
    })
});

要避免这种想法吗？

您可以在此处尝试：http://jsfiddle.net/pepesale/NTjsJ/4/

Answer 1

看起来很奇怪。但是，您可以在追加之前检查UL是否为空。

function(chart){
    //Check the list is Empty before appending...
    if($('#legend').is(":empty")) { 
      $(chart.series).each(function(i, serie){
        $('<li style="color: '+serie.color+'">'+serie.name+' ('+ serie.symbol + ')</li>').click(function(){
            serie.visible ? serie.hide() : serie.show();
        }).appendTo('#legend');
      });
    }
});

打印按钮正在复制内容

1 个答案: