1

我的问题与这个 SO question中描述的问题非常相似，但并不完全相同。

我正在从数据库中动态填充一个带有时间戳和一个应该显示在折线图上的整数值的图表。图表显示数据不正确。例如，这个数据集有 3 个项目，y = 1, y = 5, y = 1 与下面对应的 X 值时间戳匹配。外部图表问题

此图表在 X 轴上指示的时间戳处具有 y=1 和 y =1 的两项。问题是，图表在这里重复了两次。不知道发生了什么。EXT Funky Y 轴

如您所见，突出显示的元素表示该点应在 y = 5 处绘制，而不是 y = 1.5ish。最左边的点也应该从 y = 1 开始，而不是 y = 0。我整天都在阅读文档、论坛和 SO，我很困惑。我什至现在已经重写了两次愚蠢的东西来遵循“好”的例子，但这似乎也没有帮助。

型号代码，

  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 回答
0

我遇到了同样的问题，在使用 JSON_NUMERIC_CHECK 将您的解决方案应用于我的 php 代码之后

json_encode($response, JSON_NUMERIC_CHECK );

问题仍然没有解决。

我正在动态生成我的折线图，并且在我这样做时必须输入最大步长值。我发现如果最大值设置小于 5，则步长会中断，如果值为 5 或更大，则步长看起来就好了。

  axes: [{
            type: 'Numeric',
            minimum: 0,                
            maximum: maxValue,                     
            position: 'left',
            fields:  vs ,
            grid: true,
            title: 'Visitors',
            label: {
               renderer: Ext.util.Format.numberRenderer('0,0'),
                font: '10px Arial'
            }

希望这对其他人有帮助。
链接到 maxValue 设置为 4 和 5 的示例图像 http://swimmingturtle.com/temp/lt5_max.png

于 2013-03-11T22:17:07.130 回答