Ext-用散点图(chart)分析相关性

来源:互联网 发布:马云淘宝的成功 编辑:程序博客网 时间:2024/06/03 22:40

代码:

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

效果如图:
效果如图

原创粉丝点击