2012-02-01 5 views
1

ExtJs 3 애플리케이션을 ExtJs 4로 마이그레이션하고 있습니다. 변경해야 할 구성 요소 중 하나는 일련의 막대와 선이있는 차트입니다. 이전 및 현재 연도의 데이터를 표시합니다. 차트 옆에는 "전년 대비"확인란이 있습니다. 검사 할 때 모든 라인 시리즈가 선택되어 있지 않으면 숨겨져 있어야합니다. ExtJs 3에서는 visibility를 설정하여이 작업을 수행했습니다. series 스타일의 경우이 방식으로 숨김 : chart.setSeriesStyles (...). 그러나 ExtJs 4에서는이 함수가 없어서 수요에 따라 계열을 숨길 수있는 다른 방법을 찾을 수 없습니다.ExtJs의 차트 시리즈 숨기기 4

var store = Ext.create('Ext.data.Store', { 
    fields: [ 
     'month','data1','data2','data3','prev_data1','prev_data2','prev_data3' 
    ], 
    proxy: { 
     type: 'ajax', 
     url: '/getmonthlystats.php' 
    } 
}); 

this.statChart = Ext.create('Ext.chart.Chart', { 
    flex: 1, 
    store: store, 
    axes: [{ 
     type: 'Numeric', 
     position: 'left', 
     minimum: 0, 
     maximum: 100, 
     fields: [ 
      'data1', 
      'data2', 
      'data3', 
      'prev_data1', 
      'prev_data2', 
      'prev_data3' 
     ], 
     label: { 
      renderer: Ext.util.Format.numberRenderer('0,0') 
     }, 
     grid: true 
    },{ 
     type: 'Category', 
     position: 'bottom', 
     fields: ['month'], 
     label: { 
      rotate: { 
       degrees: 315 
      } 
     } 
    }], 
    series: [{ 
     type: 'column', 
     yField: ['data1','data2','data3'], 
     xField: 'month' 
    }, 
    { 
     type: 'line', 
     yField: 'prev_data1', 
     xField: 'month' 
    },{ 
     type: 'line', 
     yField: 'prev_data2', 
     xField: 'month' 
    },{ 
     type: 'line', 
     yField: 'prev_data3', 
     xField: 'month' 
    }] 
}); 

그래서, 라인 prev_data1, prev_data2, prev_data3가 (체크 박스의 상태에 따라) 표시 또는 필요에 숨겨진해야합니다 여기 내 차트의 코드입니다. 누구든지 그렇게하는 방법을 알고 있습니까?

고맙습니다.

답변

3

이 (내 코드의 샘플을) 시도 :

의 ExtJS 4.2.x를

를 들어

handler: function (checkbox, checked) { 
    if (checked) 
     chart.series.getAt(index).showAll(); 
    else 
     chart.series.getAt(index).hideAll(); 
} 
+0

줄을 숨기지 만 선 그래프의 최고점을 나타내는 모든 점은 계속 표시됩니다. – ischenkodv

+0

글쎄, 그것은 4.0.2에서 작동, 다른 버전에 대해 확실하지 않습니다. 시리즈 소스 코드를보십시오. –

+0

마커를 전혀 숨기려면 선 시리즈에 showMarkers : false를 설정하십시오. 괜찮아. 다른 솔루션은 새로운 시리즈 구성으로 차트를 완전히 재현합니다. – ischenkodv

0

당신이 당신의 차트 '전설'을 사용하는 경우,이 코드는 당신을 위해 더 좋을 것입니다 :

var chart = Ext.getCmp(chartId); 
var series = chart.series.getAt(seriesIndex); 
if (value) { 
    series.showInLegend = true; 
    series.showAll(); 
} else { 
    series.showInLegend = false; 
    series.hideAll(); 
} 
chart.redraw();