如何在Ext.js中设计图表？ [英] How To design chart in Ext.js?

问题描述

我已经开始使用Ext.js上的图表了。我是这个Ext.js的新功能我附上了图表1和图表2。我需要设计图表，如chart1，但它不会来。我已经做了图表，但它显示像chart2。怎么可以实现像chart1。 我附上了两张图片供参考。任何人可以给我提示/解决方案如何解决这个问题。基于日期和工作价值图线必须到来，基于停机时间和日期的另一个图形线必须来。在第一个图表1中，蓝色/红点和线条显示了值，还有一件我想知道的事情，是否可以在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

这里商店代码

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

推荐答案

你好，我从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

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

这篇关于如何在Ext.js中设计图表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！