How To design chart in Ext.js?

问题

I have started work on charts using Ext.js. I am new for this Ext.js. i have attached both image chart1 and chart2. I need to design chart like chart1 but it is not coming. I have did chart but it is showing like chart2. How can achieve like chart1. I have attached both images for references. Can any one give me hints/solution how to solve this issue. based on date and job value graph line has to come and another graph line based on downtime and date has to come .In first chart1 blue/red dot and line shows on the values, One more thing i want to know, is it possible to draw non continuous line in Ext.Js chart? Great appreciated, Thank You

Here Store Code:

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

Here Model code:

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

Here View Code:

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

回答1:

Hi i got answer from sencha forum, We can't do line breaking chart. 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

回答2:

This can be done by setting the series style connectDiscontinuousPoints to false and ensuring that the data for the value for the "missing" points is set to null.

Example:

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

来源：https://stackoverflow.com/questions/15269368/how-to-design-chart-in-ext-js