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' } } ] });
效果如图:
相关文章推荐
- Ext chart读xml数据
- Ext.chart.Chart 显示图标 -- 本地数据
- Ext fucionchart插件
- fusionchart图表遮挡Ext下拉控件或日期控件解决办法(IE下有问题firefox与chrome正常)
- EXT根据数据绘制chart柱状图和饼图,动态改变坐标轴
- Ext.chart 包的类图
- Ext.net Chart 使用心得(一)
- ext-chart
- 一个简单的e-Chart图表使用示例之散点图
- 初识 EXT3.0 中的 chart
- Ext 3.0 chart 心得
- MPAndroidChart 雷达图、饼图、气泡图、散点图、柱状图用法大全
- JChartFree使用散点图
- Ext JS4学习教程+笔记(八)Ext.chart.Chart
- Ext.chart 包的类图
- Ext.chart.Chart的使用
- Dundas Chart Control 5.0 SP7 研究
- EXT.NET复杂布局(三)——复杂表单布局
- 解决 ASP.NET Chart 控件出错 为 ChartImg.axd 执行子请求时出错
- matplotlib学习之scatter函数--绘制散点图