开通博客赚积分
发布资源赚积分
分类

源码开发语言/平台
当前位置：首页 > 源码/资料 > 中间件编程 > 查看源码
charts.js
资源名称：ext-3.0.0.zip　[点击查看]
上传用户：shuoshiled
上传日期：2018-01-28
资源大小：10124k
文件大小：5k
源码类别：

中间件编程

开发平台：

JavaScript

charts.js：源码内容
  1. /*!  * Ext JS Library 3.0.0  * Copyright(c) 2006-2009 Ext JS, LLC  * licensing@extjs.com  * http://www.extjs.com/license  */ Ext.chart.Chart.CHART_URL = '../../resources/charts.swf';
  3. Ext.onReady(function(){
  5.     var store = new Ext.data.JsonStore({
  6.         fields:['name', 'visits', 'views'],
  7.         data: [
  8.             {name:'Jul 07', visits: 245000, views: 3000000},
  9.             {name:'Aug 07', visits: 240000, views: 3500000},
  10.             {name:'Sep 07', visits: 355000, views: 4000000},
  11.             {name:'Oct 07', visits: 375000, views: 4200000},
  12.             {name:'Nov 07', visits: 490000, views: 4500000},
  13.             {name:'Dec 07', visits: 495000, views: 5800000},
  14.             {name:'Jan 08', visits: 520000, views: 6000000},
  15.             {name:'Feb 08', visits: 620000, views: 7500000}
  16.         ]
  17.     });
  19.     // extra extra simple
  20.     new Ext.Panel({
  21.         title: 'ExtJS.com Visits Trend, 2007/2008 (No styling)',
  22.         renderTo: 'container',
  23.         width:500,
  24.         height:300,
  25.         layout:'fit',
  27.         items: {
  28.             xtype: 'linechart',
  29.             store: store,
  30.             xField: 'name',
  31.             yField: 'visits',
  32. listeners: {
  33. itemclick: function(o){
  34. var rec = store.getAt(o.index);
  35. Ext.example.msg('Item Selected', 'You chose {0}.', rec.get('name'));
  36. }
  37. }
  38.         }
  39.     });
  41.     // extra simple
  42.     new Ext.Panel({
  43.         iconCls:'chart',
  44.         title: 'ExtJS.com Visits Trend, 2007/2008 (Simple styling)',
  45.         frame:true,
  46.         renderTo: 'container',
  47.         width:500,
  48.         height:300,
  49.         layout:'fit',
  51.         items: {
  52.             xtype: 'linechart',
  53.             store: store,
  54.             url: '../../resources/charts.swf',
  55.             xField: 'name',
  56.             yField: 'visits',
  57.             yAxis: new Ext.chart.NumericAxis({
  58.                 displayName: 'Visits',
  59.                 labelRenderer : Ext.util.Format.numberRenderer('0,0')
  60.             }),
  61.             tipRenderer : function(chart, record){
  62.                 return Ext.util.Format.number(record.data.visits, '0,0') + ' visits in ' + record.data.name;
  63.             }
  64.         }
  65.     });
  67.     // more complex with a custom look
  68.     new Ext.Panel({
  69.         iconCls:'chart',
  70.         title: 'ExtJS.com Visits and Pageviews, 2007/2008 (Full styling)',
  71.         frame:true,
  72.         renderTo: 'container',
  73.         width:500,
  74.         height:300,
  75.         layout:'fit',
  77.         items: {
  78.             xtype: 'columnchart',
  79.             store: store,
  80.             url:'../../resources/charts.swf',
  81.             xField: 'name',
  82.             yAxis: new Ext.chart.NumericAxis({
  83.                 displayName: 'Visits',
  84.                 labelRenderer : Ext.util.Format.numberRenderer('0,0')
  85.             }),
  86.             tipRenderer : function(chart, record, index, series){
  87.                 if(series.yField == 'visits'){
  88.                     return Ext.util.Format.number(record.data.visits, '0,0') + ' visits in ' + record.data.name;
  89.                 }else{
  90.                     return Ext.util.Format.number(record.data.views, '0,0') + ' page views in ' + record.data.name;
  91.                 }
  92.             },
  93.             chartStyle: {
  94.                 padding: 10,
  95.                 animationEnabled: true,
  96.                 font: {
  97.                     name: 'Tahoma',
  98.                     color: 0x444444,
  99.                     size: 11
  100.                 },
  101.                 dataTip: {
  102.                     padding: 5,
  103.                     border: {
  104.                         color: 0x99bbe8,
  105.                         size:1
  106.                     },
  107.                     background: {
  108.                         color: 0xDAE7F6,
  109.                         alpha: .9
  110.                     },
  111.                     font: {
  112.                         name: 'Tahoma',
  113.                         color: 0x15428B,
  114.                         size: 10,
  115.                         bold: true
  116.                     }
  117.                 },
  118.                 xAxis: {
  119.                     color: 0x69aBc8,
  120.                     majorTicks: {color: 0x69aBc8, length: 4},
  121.                     minorTicks: {color: 0x69aBc8, length: 2},
  122.                     majorGridLines: {size: 1, color: 0xeeeeee}
  123.                 },
  124.                 yAxis: {
  125.                     color: 0x69aBc8,
  126.                     majorTicks: {color: 0x69aBc8, length: 4},
  127.                     minorTicks: {color: 0x69aBc8, length: 2},
  128.                     majorGridLines: {size: 1, color: 0xdfe8f6}
  129.                 }
  130.             },
  131.             series: [{
  132.                 type: 'column',
  133.                 displayName: 'Page Views',
  134.                 yField: 'views',
  135.                 style: {
  136.                     image:'bar.gif',
  137.                     mode: 'stretch',
  138.                     color:0x99BBE8
  139.                 }
  140.             },{
  141.                 type:'line',
  142.                 displayName: 'Visits',
  143.                 yField: 'visits',
  144.                 style: {
  145.                     color: 0x15428B
  146.                 }
  147.             }]
  148.         }
  149.     });
  150. });