Ext.js에서 차트를 디자인하는 방법?

Question

Ext.js를 사용하여 차트 작업을 시작했습니다. 나는이 Ext.js에 대해 새로운 사람이다. 나는 이미지 chart1과 chart2를 첨부했다. 나는 chart1과 같은 차트를 디자인해야하지만 그것은 오지 않을 것입니다. 나는 차트를했지만 chart2처럼 보이고있다. 어떻게 차트 1처럼 달성 할 수 있습니다. 두 이미지를 참조 용으로 첨부했습니다. 어느 누구도이 문제를 해결하는 방법에 대한 힌트/해결책을 줄 수 있습니까? 날짜 및 작업 값을 기준으로 그래프 라인이오고 다운 타임과 날짜를 기반으로하는 또 다른 그래프 라인은이되어야합니다. 첫 번째 차트 1 파란색/빨간색 점과 라인이 값에 표시됩니다. 한 가지 더 알고 싶은 것은 가능합니다. Ext.Js 차트에 연속적이지 않은 라인을 그리는 방법?

다음

Ext.define('Graph.store.GraphStore', { 
    extend: 'Ext.data.Store', 
    model: 'Graph.model.GraphModel', 
    data: [ 
     { status: '0', date: new Date(2012, 1, 1),mdate: new Date(2012, 2, 1) }, 
     { status: 'Jobs', date: new Date(2012, 1, 15),mdate: new Date(2012, 2, 5) }, 
     { status: 'Down Time', date: new Date(2012, 1, 29),mdate: new Date(2012, 2, 28) } 
    ], 
    autoLoad: true 
}); 

모델 코드 :

Ext.define("Graph.view.GraphView", { 
    extend:'Ext.container.Container', 
    alias:'widget.mainGraphView', 
    requires:['Ext.chart.Chart','Ext.chart.axis.Numeric','Ext.chart.axis.Time','Ext.chart.series.Line','Ext.chart.axis.Category'], 
    initComponent: function() { 

     this. layout={ 
      type: 'vbox', 
      align:'stretch', 
      pack: 'center' 
     }; 
     this.items=[ 
       { 
        xtype: 'chart', 
        animate: true, 
        theme: 'Green', 
        background: { 
         fill: '#ccc' 
        }, 
        shadow: true, 
        width: window.innerWidth, 
        height: window.innerHeight, 
        store : 'GraphStore', 
        axes: [ 
         { 
          title: 'MCF', 
          type: 'Category', 
          position: 'left', 
          fields: ['status'], 
          grid: { 
           odd: { 
            opacity: 1, 
            fill: '#ddd', 
            stroke: '#bbb', 
            'stroke-width': 1 
           } 
          } 
         }, 
         { 
          type: 'Time', 
          position: 'bottom', 
          fields: ['date'], 
          title: 'Day', 
          dateFormat: 'F, Y', 
          constrain: true, 
          fromDate: new Date('1/1/12'), 
          toDate: new Date('3/30/12'), 
          grid: true 
         } 
        ], 
        series: [ 
         { 
          type: 'line', 
          xField: 'date', 
          yField: 'status' 
         }, 
         { 
          type: 'line', 
          xField: 'mdate', 
          yField: 'status' 
         } 
        ] 
       } 
      ] 
     this.callParent(arguments); 
    } 
}); 

,691,363 : 여기

Ext.define('Graph.model.GraphModel', { 
    extend: 'Ext.data.Model', 
    fields: ['status', 'date','mdate'] 
}); 

코드보기 위대한 감사, 당신에게

다음

상점 코드 감사 (210)

Answer 1

안녕 난 엽차 포럼에서 대답을 얻었다, 우리는 라인 파괴 차트를 할 수 없습니다. http://www.sencha.com/forum/showthread.php?258157-Is-it-possible-to-draw-non-continuous-line-chart-(Line-breaking-chart)-in-sencha-Ext.&p=945869#post945869

Answer 2

이 작업은 직렬 스타일 connectDiscontinuousPoints를 false로 설정하고 "누락"포인트의 값에 대한 데이터가 null로 설정되도록하여 수행 할 수 있습니다.

예 :

var store = new Ext.data.JsonStore({ 
    fields:['name', 'visits', 'views'], 
    data: [ 
    {name:'Jul 07', visits: 245000}, 
    {name:'Aug 07', visits: 240000}, 
    {name:'Sep 07', visits: 355000}, 
    {name:'Oct 07', visits: null}, 
    {name:'Nov 07', visits: null}, 
    {name:'Dec 07', visits: 495000}, 
    {name:'Jan 08', visits: 520000}, 
    {name:'Feb 08', visits: 620000} 
    ] 
}); 

new Ext.Panel({ 
    title: 'Line with a break', 
    renderTo: 'chart', 
    width:500, 
    height:300, 
    layout:'fit', 

    items: { 
    xtype: 'linechart', 
    store: store, 
    xField: 'name', 
    yField: 'visits', 
    seriesStyles: {connectDiscontinuousPoints: false} 
    } 
});