Question

我的问题与in this SO question描述的问题非常相似，但不完全相同。

我使用时间戳和整数值动态填充数据库中的图表，该值应显示在折线图上。图表错误地显示数据。例如，该数据集有3个项目，其中y = 1，y = 5，y = 1，与下面的相应X值时间戳匹配。 Ext Chart Problem

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

如您所见，突出显示的元素表示点应该在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();
    }
});

任何帮助解决这个问题将不胜感激！

Answer 1

我发现了这个问题。事实证明，当我请求数据时，我的数据提供程序没有将字符串中的值转换为整数 - 因此看似不稳定的图表。修改数据提供程序以确保count字段始终生成一个整数，当来自服务器时，图表开始正常工作。

Answer 2

我遇到了同样的问题，并在使用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

EXT JS 4折线图显示数据不正确

2 个答案: