ExtJS 차트의 필드 레이블 변경

Question

ExtJS 차트에서 축 레이블을 변경하는 방법은 무엇입니까? 특히, 나는 프록시를 통해 데이터를 집어 넣고, 데이터베이스에 레이블이 붙어있는 것처럼 필드를 채우고있다. 정적 인 경우에도 맞춤 설정하고 싶습니다. ExtJS 사이트의 코드는 다음과 같습니다.

var panel1 = Ext.create('widget.panel', { 
    width: 800, 
    height: 400, 
    title: 'Stacked Bar Chart - Movies by Genre', 
    renderTo: Ext.getBody(), 
    layout: 'fit', 
    items: { 
     xtype: 'chart', 
     animate: true, 
     shadow: true, 
     store: store, 
     legend: { 
      position: 'right' 
     }, 
     axes: [{ 
      type: 'Numeric', 
      position: 'bottom', 
      fields: ['comedy', 'action', 'drama', 'thriller'], // Need custom values here 
      title: false, 
      grid: true, 
      label: { 
       renderer: function(v) { 
        return String(v).replace(/000000$/, 'M'); 
       } 
      }, 
      roundToDecimal: false 
     }, { 
      type: 'Category', 
      position: 'left', 
      fields: ['year'], 
      title: false 
     }], 
     series: [{ 
      type: 'bar', 
      axis: 'bottom', 
      gutter: 80, 
      xField: 'year', 
      yField: ['comedy', 'action', 'drama', 'thriller'], 
      stacked: true, 
      tips: { 
       trackMouse: true, 
       width: 65, 
       height: 28, 
       renderer: function(storeItem, item) { 
        this.setTitle(String(item.value[1]/1000000) + 'M'); 
       } 
      } 
     }] 
    } 
}); 

차트에서 무언가를 수정하여이 작업을 수행 할 수 있습니까?

Answer 1

레이블이 렌더링되는 방식을 변경하는 한 가지 방법은 렌더러 기능을 제공하는 것입니다. 이 예제를 http://docs.sencha.com/extjs/4.2.2/#!/example/charts/StackedBar.html에서 가져온 질문에있는 코드에서이 예를 볼 수 있습니다.

label: { 
    renderer: function(v) { 
     return String(v).replace(/(.)00000$/, '.$1M'); 
    } 
}, 

이 렌더러없이, 라벨은 20000000 또는 40000000과 같을 것이다. 렌더러는 해당 숫자를 20.0M 및 40.0M으로 변환합니다. 따라서 레이블을 원하는대로 변경하는 자체 함수를 작성할 수 있습니다.

axes 및 labels에 대한 문서를 확인하는 것이 좋습니다. http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.chart.axis.Axis http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.chart.Label

Answer 2

는 ExtJS를 사용하여이 작업을 수행 할 수있는 더 좋은 방법이 있는지 모르겠어요,하지만 난 단지 그들이 가게에 던져 도착하기 전에 내가 뽑아 JSON 결과를 fromatting 끝났다. 차트를 사용하여이를 수행 할 수있는 방법이있을 수 있지만이 해결 방법은 어떻게 해결 했습니까?