2013-03-05 77 views
2

我有一个来自高图的百分比叠加柱形图。在图例项目点击时,默认情况下该系列应该隐藏。但随着隐藏该系列,它也通过将另一个系列重新绘制到100%,当理想情况下它不应该影响其他系列y值并重新绘制其原始y值而不是100%。 这里演示链接:http://jsfiddle.net/kanz3/在百分比叠加列highchart上禁用legendItemClick上的百分比堆积

plotOptions: { 
    series: { 
     events: { 
      legendItemClick: function(event) { 
      var visibility = this.visible ? 'visible' : 'hidden';  
      //chart.series.stacking='normal' 
      } 
     }, 
     stacking: 'percent' 
    } 
} 

回答

0

的方法之一是重新计算你的序列数据是百分比,然后用叠加绘制出来:堆叠。有点痛苦,但计算每对的百分比应该不会太难。

plotOptions: { 
     series: { 
      events: { 
       legendItemClick: function(event) { 
        //console.log(this); 
        var visibility = this.visible ? 'visible' : 'hidden'; 
        //this.stacking= 'normal' 
        //chart.series.yaxis.max = 70; 
       // console.log(chart); 
        //chart.redraw = false;   
       //chart.series.stacking='normal' 
        // chart.type='line' 
       } 
      }, 
      stacking: 'stacked' 
     } 
    }, 

    series: [{ 
     data: [50,50,50,50]   
    }, 
      { 
     data: [50,50,50,50]   
    }] 

http://jsfiddle.net/2bWMC/

+0

是感谢您的答复,但会使用原来的数字别处限制我,说在提示采取 – user2134615 2013-03-05 09:04:18

+0

点。如果只是您担心的工具提示,则可以通过在数据点中指定额外信息并自定义工具提示来解决该问题。否则,我无法在百分比堆积图表中找到想要的方法。 – SteveP 2013-03-05 10:26:45

0

可以实现它的翻译功能和额外的参数,保持组/系列的位置。 http://jsfiddle.net/kanz3/1/

plotOptions: { 
     series: { 
      events: { 
       legendItemClick: function (event) { 

        if(!this.options.hidden) 
        { 
         this.options.groupXY.x = this.group.translateX; 
         this.options.groupXY.y = this.group.translateX; 
         this.group.translate(1000,1000); 
         this.options.hidden = true; 
        } 
        else 
        { 
         this.group.translate(this.options.groupXY.x, this.options.groupXY.y); 
         this.options.hidden = false; 
        } 

        return false; 

       } 
      }, 
      stacking: 'percent' 
     } 
    }, 

    series: [{ 
     groupXY: { 
      hidden:false, 
      x: 0, 
      y: 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] 
    }, { 
     groupXY: { 
      hidden:false, 
      x: 0, 
      y: 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] 
    }]