图表中的空值

时间:2013-02-19 13:43:05

标签: html html5 extjs4

我在商店中的空值有问题,我给图表。 我希望在值为null时中断系列,并在值返回到数字时继续行。 我在extJs3中做到了。

数据点:

        Ext.define('DataPoint', {
        extend: 'Ext.data.Model',
        fields: [
                {name: 'time', type: 'date', dateFormat: 'Y-m-d H:i'}, 
                {name: 'val',mapping:'value', type: 'float', useNull:true, convert: function(v, record){ if(v == null){return undefined}return parseInt(v)}}, ],
        idProperty: 'time',
        persistenceProperty: 'data'
    });

商店:

store = Ext.create('Ext.data.Store', {
        model: 'DataPoint',
        proxy:{
            type: 'ajax',
            url: linePanel.url,
            reader: {
                type: 'json',
                root: 'data'
            }
        },
        sorters: [{ 
            property: 'time'
        }],
        format: 'json',
        idProperty: 'time',
        root: 'data'
    });

图表:

Ext.create('Ext.chart.Chart', {
        renderTo: linePanel.columnChart.body.dom,
         store: store,
        axes: [
           {
               type: 'Category',
               position: 'bottom',
               fields: ['time'],
           },
           {
               title: linePanel.unit,
               type: 'Numeric',
               position: 'left',
               minimum: 0,
               maximum: 100,
               majorTickSteps: 1

           }
       ],
         series: [
            { xField: 'time', 
                yField: 'val', 
                type: 'line',
                highlight : true,
                smooth: true,
                style: {
                    stroke: '#00b300',
                    'stroke-width': 5,
                    color: '#00b300',
                },
                markerConfig: {
                    type: 'circle',
                    stroke: '#00b300',
                    color: '#00b300'
                }

            }
         ]
   });

1 个答案:

答案 0 :(得分:1)

我从sencha得到答案,这是solution