散点图：数据未正确填充（X/Y 轴全为零？）

Question

基本上，我商店的数据加载正确，但由于某种原因，数据未正确绘制在图表上。

我使用了 console.log 来确定存储是否正确填充。当我检查图表上的元素时，我看到正在绘制“圆”的 Dom 元素，但没有正确放置在图表上；他们是隐藏的。

但是，我在系列图表中添加了一个渲染器，突然间它开始绘制圆圈，除了它们都直接位于图表的中间。如果我检查那个元素，看起来 X 和 Y 精灵属性都是 0。所以它们显示在屏幕上，但没有放置在正确的位置。

基本上它的工作方式是屏幕渲染，用户对他们想要看到的内容进行几个选择，加载商店，一旦商店加载，我运行chart.redraw()。但是没有正确绘制。这是适当的类。

我会注意到，返回的“日期”字段作为 unix 时间戳从服务器返回。适当的日期显示在 X 轴标签中，但图表中的数据值点未正确绘制。

型号

Ext.define('RH.model.analytics.SitePenalty', {
    extend : 'Ext.data.Model',
    idProperty: 'date',
    fields : [
        {name: 'change', type: 'float'},
        {name: 'date', type: 'date', dateFormat: 'timestamp'}
    ]
});

商店

Ext.define('RH.store.analytics.SitePenalty', {
    extend: 'Ext.data.Store',
    storeId: 'sitePenaltyStore',
    model: 'RH.model.analytics.SitePenalty',
    sorters: [{
        property: 'date',
        direction: 'ASC'
    }],
    autoLoad: false,
    proxy: {
        type: 'ajax',
        url: '/analytics/penalty',
        reader: {
            type: 'json',
            root: 'data'
        }
    }
});

图表

Ext.define('RH.view.analytics.PenaltyChart', {
    extend: 'Ext.chart.Chart',
    alias: 'widget.rh-analytics-penaltychart',
    requires: ['Ext.chart.series.Scatter', 'Ext.chart.axis.Numeric', 'Ext.chart.axis.Category', 'RH.store.analytics.SitePenalty'],
    title: 'Traffic Change',
    style: 'background:#fff',
    animate: true,
    shadow: true,
    store: 'sitePenaltyStore',
    axes: [{
        type: 'Numeric',
        position: 'left',
        fields: ['change'],
        /*label: {
            renderer: Ext.util.Format.numberRenderer('0,0')
        },*/
        title: 'Traffic Change (%)',
        grid: true
    }, {
        type: 'Category',
        position: 'bottom',
        fields: ['date'],
        title: 'Date'
    }],
    series: [{
        type: 'scatter',
        xField: 'date',
        yField: 'change',
        axis: 'left',
        markerConfig: {
            radius: 5,
            size: 5
        },
        //When this is in place, all circles are drawn on top of each other in center 
        //of chart. When this renderer is missing, nothing is drawn on screen
        renderer: function (sprite, record, attributes, index, store) {
            console.log(sprite);
            console.log(record);

        }
    }]
});

**请注意**

在上面的渲染器方法中（一个例子）： 精灵.x = 0 精灵.y = 0 属性.translate.x = 40296794232628.14 属性.translate.y = 240.58000000000004

是否应该将那些 attributes.translate 值应用于精灵值？我从来不必手动执行此操作，但想知道是否有问题导致无法应用这些值。另外，我什至不知道 sprite.x 和 sprite.y 是否应该总是为零。这里只是猜测。

控制器片段

Ext.getStore('sitePenaltyStore').load({
    scope: this,
    params: {'acctId': acctId, 'propertyId': propertyId, 'viewId': viewId},
    callback: function() {
        //Double checked here, data is loading into store just fine
        console.log(Ext.getStore('sitePenaltyStore'));
        this.getPenaltyChart().redraw();
    }
});

Answer 1

事实证明，对于日期，类别和时间轴无法正常工作。所以我要做的是使用一个数字轴，并使用标签渲染器将 unix 时间戳格式化为日期。

这对每个人来说都不是一个很好的解决方案，但由于我的另一个轴“变化”的最大值为 1.0（使用百分比），我可以做一个简单的 if 语句。如果数字足够大，它可能是一个日期。

数据现在可以正确地绘制在图表上。

axes: [{
            type: 'Numeric',
            position: 'left',
            fields: ['change'],
            /*label: {
             renderer: Ext.util.Format.numberRenderer('0,0')
             },*/
            title: 'Traffic Change (%)',
            grid: true
        }, {
            type: 'Numeric',
            position: 'bottom',
            fields: ['date'],
            title: 'Date',
            label: {
                renderer: function(v) {
                    if (v > 100) {
                        var date = new Date(v * 1000);
                        var newTime = date.getFullYear() + '-' + date.getMonth() + '-' + date.getDate();
                        return newTime;
                    }
                    return v;
                }
            }
        }],