Ext JS 4散點圖 - 數據存儲的半徑

Question

在Ext JS中，我試圖製作一張散點圖。我想我的散點之一的半徑來自我的商店

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中的值。

所以我的問題是，我怎樣才能理解我想要的數據4的半徑？

謝謝！

Answer 1

您可以爲series定義renderer函數，如下所示。它顯示瞭如何設置各個點的顏色;

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, 
        }); 
       } 
}]