2013-03-05 92 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] 
    }]