2015-02-11 55 views
0

在我的图表中,我将一个类与每个系列的数据结合在一起。 在某些时候我隐藏了一个系列的数据。但是,如果现在我显示/隐藏任何其他系列,则会出现隐藏的数据文件。显示/隐藏系列消失数据的样式

我做了一个jsfiddle的例子。执行以下步骤来见我的意思:
1.按钮1单击隐藏系列1 datalables
2隐藏系列2

现在在系列1的datalables显示出来。我怎样才能阻止这种行为?

的jsfiddle链接:http://jsfiddle.net/jmogexfj/2/

$(function() { 

button1(); 

$('#container').highcharts({ 

    xAxis: { 
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
    }, 

    plotOptions: { 
     series: { 
      dataLabels: { 
       enabled: true, 
       useHTML: true, 
        formatter: function() { 
         return '<div class="label_'+this.series._i+'">' + this.y + '</div>'; 
        } 
      } 
     } 
    }, 

    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] 
    }, 
       { 
     data: [10.9, 50.5, 60.4, 100.2, 104.0, 106.0, 120.6, 108.5, 106.4, 104.1, 90.6, 50.4] 
    }] 
}); 
}); 


function button1(){ 
    $("#b1").click(function(){ 
    $(".label_0").toggle(); 
    }); 
} 

回答

0

那怎么Highcharts库的工作方式。当你更新图表时(如图例中的隐藏,调整窗口浏览器大小等),元素被重绘。

要隐藏dataLabels,使用series.update()

$('#container').highcharts().series[0].update({ 
     dataLabels: { 
      enabled: false 
     } 
    }); 

演示:http://jsfiddle.net/jmogexfj/4/

如果你确实需要使用类,然后使用chart.events.redraw,以显示所有/隐藏dataLabel重绘:http://jsfiddle.net/jmogexfj/5/

Highcharts示例:

chart: { 
     events: { 
      redraw: function() { 
       var showOrHide = display ? 'show' : 'hide'; 
       $(".label_0")[showOrHide](); 
      } 
     } 
    }, 

点击查看按钮:

function button1() { 
    $("#b1").click(function() { 
    display = !display; 
    $(".label_0").toggle(); 
    }); 
}