2

Ext.js を使用してチャートの作業を開始しました。私はこの Ext.js が初めてです。画像 chart1 と chart2 の両方を添付しました。chart1 のようなチャートをデザインする必要がありますが、まだ来ていません。チャートを作成しましたが、チャート2のように表示されています。chart1のように達成するにはどうすればよいですか。参考までに両方の画像を添付しました。この問題を解決するためのヒント/解決策を教えてください。日付とジョブの値に基づいてグラフの線が来なければならず、ダウンタイムと日付に基づいて別のグラフの線が来なければなりません.最初のチャート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.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);
    }
});

チャート1 チャート2

4

2 に答える 2

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

于 2013-03-11T08:25:03.230 に答える
0

これは、シリーズ スタイル 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-05T15:09:17.297 に答える