如何在Ext.js中设计图表？

我已经开始在使用Ext.js的图表上工作。我是这个Ext.js的新手。我附上了图像chart1和chart2。我需要设计像chart1这样的图表，但它不会到来。我已经做了图表，但它显示如图表2。如何能够实现如图1。我附上了两张图片供参考。任何人都可以给我提示/解决方案如何解决这个问题。根据日期和工作价值图线必须到来，另一个基于停机时间和日期的图形线必须来。第一个图表1蓝色/红色圆点和线条显示值，还有一件事我想知道，是否有可能在Ext.Js图表中绘制不连续的行？伟大的赞赏，感谢您如何在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.model.GraphModel', { 
    extend: 'Ext.data.Model', 
    fields: ['status', 'date','mdate'] 
});

这里查看代码：

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); 
    } 
});

chart1 chart2

来源

2013-03-07 Ramesh Lamani

嗨我从sencha论坛得到答案，我们不能做断线图。 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

来源

2013-03-11 08:25:03

这可以通过将系列样式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} 
    } 
});

来源

2013-06-05 15:09:17 meeks

如何在Ext.js中设计图表？

回答

相关问题