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

【问题标题】：How To design chart in Ext.js?如何在 Ext.js 中设计图表？
【发布时间】：2013-02-22 13:03:05
【问题描述】：

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

【问题讨论】：

标签： extjs extjs4 extjs4.1 sencha-charts

【解决方案1】：

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

【讨论】：