1

私の問題は、この SO questionで説明されている問題と非常に似ていますが、まったく同じではありません。

タイムスタンプと折れ線グラフに表示される整数値を使用して、データベースからグラフを動的に作成しています。チャートにデータが正しく表示されません。たとえば、このデータセットには、以下の対応する X 値のタイムスタンプと一致する y = 1、y = 5、y = 1 の 3 つのアイテムがあります。外部チャートの問題

このグラフには、X 軸に示されたタイムスタンプで y=1 と y =1 の 2 つのアイテムがあります。問題は、チャートがここで 2 回複製されていることです。何が起こっているのかわからない。EXTファンキーY軸

ご覧のとおり、強調表示された要素は、ポイントが y = 1.5ish ではなく y = 5 でグラフ化されるべきであることを示しています。左端のポイントも y = 0 ではなく y = 1 から開始する必要があります。「良い」例に従うために、ばかげたことを2回書き直しましたが、それも役に立たないようです。

モデルコード、

  Ext.define('ROOT.model.dataset', {
    extend: 'Ext.data.Model',
    alias: 'event',
    fields: ['count', 'time'],

    constructor: function (config) {
        this.callParent(arguments);
        Ext.apply(this, config);
    }
});

グラフコード、

Ext.define('Root.view.ChartPanel', {
    extend: 'Ext.panel.Panel',
    title: 'Event Metrics',

    initComponent: function () {
        Ext.apply(this, {
            store: new Ext.data.SimpleStore({fields: [
            {name: 'count', type: 'int'},
            {name: 'time', type: 'string'}
            ]})
        });
        this.callParent(arguments);

        //CREATE CHART
        this.barChart = Ext.create('Ext.chart.Chart', {
            renderTo: Ext.getBody(),
            width: 700,
            height: 500,
            animate: false,
            store: this.store,

            axes: [
                {
                    type: 'Numeric',
                    position: 'left',
                    fields: ['count'],
                    label: {
                        renderer: Ext.util.Format.numberRenderer('0,0')
                    },
                    title: 'Count',
                    grid: true,
                    adjustMaximumByMajorUnit: false,
                   adjustMinimumByMajorUnit: false,
                    minorTickSteps: 5,
                    majorTickSteps: 3,
                    minimum: 0
                },
                {
                    type: 'Category',
                    position: 'bottom',
                    fields: ['time'],
                    title: 'Date'
                }
            ],

            series: [
                {
                    type: 'line',
                    axis: ['left', 'bottom'],
                    highlight: true,
                    tips: {
                        trackMouse: true,
                        width: 175,
                        height: 20,
                        renderer: function(storeItem, item) {
                            this.setTitle(storeItem.get('time') + ': ' + storeItem.get('count'));
                        }
                    },
                  /*  label: {
                        display: 'insideEnd',
                        field: 'count',
                        renderer: Ext.util.Format.numberRenderer('0'),
                        orientation: 'horizontal',
                        color: '#333',
                        'text-anchor': 'middle',
                        constrast: true
                    },*/
                    xField: 'time',
                    yField: ['count'],
                    markerConfig: {
                        type: 'cross',
                        size: 4,
                        radius: 4,
                        'stroke-width': 0
                    }
                }   
            ]
        });
        this.add(this.barChart);
    }, //end init



    refreshEventChart: function (data) {
        this.clear();
        this.store.loadData(data);
        this.barChart.redraw();
    },

    clear: function() {
        this.store.removeAll();
        this.barChart.surface.removeAll();
    }
});

これを理解する助けがあれば大歓迎です!

4

2 に答える 2

1

私は問題を発見しました。データを要求したときに、データ プロバイダーが値を文字列から整数に変換していなかったことが判明しました。カウント フィールドが常に整数を生成するようにデータ プロバイダーを変更した後、サーバーからの受信時にグラフが正常に機能し始めました。

于 2012-06-21T17:21:01.420 に答える