您的位置:首页 > Web前端 > JavaScript

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

2017-06-16 14:37 155 查看
代码:

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


效果如图:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  extjs