Question

我已经开始使用Ext.js在图表上工作了。我是这个Ext.js的新手。我已附上图像chart1和chart2。我需要像chart1一样设计图表，但它不会来。我做过图表，但它显示的是图表2。如何实现像chart1。我已附上两张图片供参考。任何人都可以给我提示/解决方案如何解决这个问题。基于日期和工作价值图表线必须来，另一个基于停机时间和日期的图表线必须。在第一个图表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.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

Answer 1

您好我从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

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

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

2 个答案: