Question

在Ext JS中，我正在尝试制作Scatter图表。我希望我的散点之一的半径来自我的商店

Ext.onReady(function() {
Ext.create('Ext.window.Window', {
    width : 800,
    height : 600,
    layout: 'fit',
    items: [chart]
}).show();
});


var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
data: [
    { 'name': 'metric one',   'data1': 10, 'data2': 12, 'data3': 14, 'data4': 8,  'data5': 13 },
    { 'name': 'metric two',   'data1': 7,  'data2': 8,  'data3': 16, 'data4': 10, 'data5': 3  },
    { 'name': 'metric three', 'data1': 5,  'data2': 2,  'data3': 14, 'data4': 12, 'data5': 7  },
    { 'name': 'metric four',  'data1': 2,  'data2': 14, 'data3': 6,  'data4': 1,  'data5': 23 },
    { 'name': 'metric five',  'data1': 27, 'data2': 38, 'data3': 36, 'data4': 13, 'data5': 33 }
]
});


var chart = Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
theme:'Category2',
store: store,
axes: [{
    type: 'Numeric',
    position: 'left',
    fields: ['data2', 'data3', 'data4'],
    title: 'Sample Values',
    grid: true,
    minimum: 0
}, {
    type: 'Category',
    position: 'bottom',
    fields: ['name'],
    title: 'Sample Metrics'
}],
series: [{
    type: 'scatter',
    markerConfig: {
        type: 'circle',
        radius: 'data4' //This doesn't work!
    },
    axis: 'left',
    xField: 'name',
    yField: 'data2'
}, {
    type: 'scatter',
    markerConfig: {
        radius: 5,
        size: 5
    },
    axis: 'left',
    xField: 'name',
    yField: 'data3'
}]
});

好的，问题行注释为“//这不起作用！”。我理解为什么它不起作用 - Ext JS不明白我试图告诉它使用字段data4中的值。

所以我的问题是，如何让它理解我希望半径来自data4？

谢谢！

Answer 1

您可以为renderer定义series功能，如下所示。它还显示了如何设置各个点的颜色;

series: [{
    type: 'scatter',
    //....
    renderer: function (sprite, record, attributes, index, store) {
                    var r = record.get('data4');
                    //var color = record.get('data5');
                    return Ext.apply(attributes, {
                        radius: r,
                        size: r
                      //  fill: color,
                    });
                }
}]

Ext JS 4 Scatter plot - 数据存储区的半径

1 个答案: