Extjs4--曲线Line Charts使用详解
在项目中,我们经常要使用曲线来显示变化趋势。
下面说明一下Line Charts的使用。
源码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../ext-all.js"></script> <link rel="stylesheet" type="text/css" href="../resources/css/ext-all-debug.css" /> <title>Insert title here</title> <script type="text/javascript"> Ext.onReady(function(){ //1. Creating a Store Ext.define('WeatherPoint', { extend: 'Ext.data.Model', fields: ['min_temperature','avg_temperature','max_temperature','month'] }); //Store var store = Ext.create('Ext.data.Store', { model: 'WeatherPoint', data: [ { min_temperature: 58,avg_temperature: 65,max_temperature:80, month: 1 }, { min_temperature: 59,avg_temperature: 67,max_temperature:83, month:2 }, { min_temperature: 53,avg_temperature: 67,max_temperature:89, month: 3 }, { min_temperature: 52,avg_temperature: 60,max_temperature:80, month: 4 }, { min_temperature: 58,avg_temperature: 68,max_temperature:80, month: 5 }, { min_temperature: 58,avg_temperature: 67,max_temperature:82, month: 6 }, { min_temperature: 58,avg_temperature: 70,max_temperature:80, month: 7 }, { min_temperature: 59,avg_temperature: 70,max_temperature:95, month: 8 } ] }); //2. Creating the Chart object Ext.create('Ext.chart.Chart', { renderTo: Ext.getBody(), width: 700, //不产生动画 animate: false, //不产生阴影 shadow: false, height: 300, store: store, //图例显示在底端 legend: { position: 'bottom' }, //3. Configuring the Axes(指定X/Y轴) axes: [ { title: 'Temperature', //Y轴显示在左端,类型是数字 type: 'Numeric', position: 'left', minorTickSteps: 1, grid: { //面板条纹效果设置 odd: { opacity: 1, fill: '#eee', stroke: '#bbb', 'stroke-width': 0 } }, //y轴有三条曲线 fields: ['min_temperature','avg_temperature','max_temperature'], //y轴的最大最小值 minimum: 0, maximum: 100 },{ //X轴在底端 title: 'Month', type: 'Numeric', position: 'bottom', fields: ['month'], minimum: 1, maximum: 9 } ], //4. Configuring the Series(定义显示的曲线) series: [ { type: 'line',//直线 //当鼠标 悬浮时,高亮显示 highlight: { size: 7, radius: 7 }, style: { stroke: '#00F5FF',//曲线颜色 'stroke-width': 2,//曲线宽度 fill: '#00F5FF', opacity: 0.5 //曲线颜色透明度 }, tips: { //跟踪鼠标 trackMouse: true, width: 150, height: 28, renderer: function(storeItem, item) { this.setTitle('月份:'+ storeItem.get('month')+ ' 温度:' + storeItem.get('min_temperature')); } }, xField: 'month', yField: 'min_temperature',//最低温度曲线 markerConfig: { type: 'cross', size: 4, radius: 4, 'stroke-width': 0 } },{ type: 'line', highlight: { size: 7, radius: 7 }, style: { stroke: '#EE4000', 'stroke-width': 2, fill: '#EE4000', opacity: 0.5 }, tips: { trackMouse: true, width: 150, height: 28, renderer: function(storeItem, item) { this.setTitle('月份:'+ storeItem.get('month')+ ' 温度:' + storeItem.get('avg_temperature')); } }, xField: 'month', yField: 'avg_temperature',//平均温度曲线 markerConfig: { type: 'circle', size: 4, radius: 4, 'stroke-width': 0 } },{ type: 'line', highlight: { size: 7, radius: 7 }, style: { stroke: '#008B00', 'stroke-width': 2, fill: '#008B00', opacity: 0.5 }, tips: { trackMouse: true, width: 150, height: 28, renderer: function(storeItem, item) { this.setTitle('月份:'+ storeItem.get('month')+ ' 温度:' + storeItem.get('max_temperature')); } }, xField: 'month', yField: 'max_temperature',//最高温度曲线 markerConfig: { type: 'circle', size: 4, radius: 4, 'stroke-width': 0 } } ] }); }); </script> </head> <body> </body> </html>
运行结果:
鼠标悬浮时,曲线加粗,可以显示tip