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의 값을 사용하라고 말한다.

제 질문은 데이터를 반경이 원한다는 것을 어떻게 이해할 수 있습니까?

감사합니다.

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