Ext-用散點圖(chart)分析相關性

代碼:

Ext.define('V5.auditoper.quekeyword.view.QuekeyScatter', {
    extend: 'Ext.chart.Chart',
    theme: 'Green',  //顏色主題
    animate : true,
    //圖例
    legend: {
       position: 'right'
    },
    xtype: 'quekeyscatter',
    store: Ext.create('Ext.data.Store', {
            fields: ['temperature1','temperature2', 'date'],
            data: [
                    { temperature1: 38, temperature2: 38, date: 2},
                    { temperature1: 45, temperature2: 44, date: 5},
                    { temperature1: 58, temperature2: 48, date: 7},
                    { temperature1: 63, temperature2: 54, date: 10},
                    { temperature1: 57, temperature2: 60, date: 13},
                    { temperature1: 68, temperature2: 68, date: 17},
                    { temperature1: 41, temperature2: 74, date: 20}
                ]
            }),
     axes: [
        {
            title: 'A指標',
            type: 'Numeric',
            position: 'left',
            fields: ['temperature1','temperature2'],
            minimum: 0,
            maximum: 100
        },
        {
            title: 'B指標',
            type: 'Numeric',
            position: 'bottom',
            fields: ['date'],
            minimum: 0,
            maximum: 23
        }
    ],
    series: [
        {
            type: 'scatter',//圖表類型(line:折線圖,scatter:散點圖,column:柱狀圖)
            xField: 'date',
            highlight: true,   //高亮
            yField: 'temperature1',
            markerConfig: {
                type: 'circle',
                size: 4,
                radius: 4,
                'stroke-width': 0
            },
            //懸浮提示
            tips: {
              trackMouse: true,
              width: 100,
              height: 28,
              renderer: function(storeItem, item) {
                this.setTitle('距離值:'+storeItem.get('date'));
              }
            },
            listeners : {
                itemclick : function(o) { 
                    alert(o.index);
                }
            }
        },
        {
            type: 'line',
            smooth: true,
            xField: 'date',
            yField: 'temperature2',
            markerConfig: {
                type: 'circle',
                size: 2,
                radius: 1,
                'stroke-width': 0,
                'fill': '#000'
            }
        }
    ]
});

效果如圖:
效果如圖

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章