Question

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

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

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

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

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

MODEL

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);

        }
    }]
});

**请注意**

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

是否应将这些attributes.translate值应用于精灵值？我从来没有必须手动执行此操作，但想知道某些内容是否已损坏导致这些值无法应用。另外，我甚至不知道sprite.x＆amp; sprite.y不应该总是零。只是在这里猜测。

CONTROLLER SNIPPET

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

原来，对于日期，类别＆amp;时间轴只是不能正常工作。所以我要做的就是使用数字轴，并使用标签渲染器将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;
                }
            }
        }],

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

1 个答案: