Ext3 学习(5) -- Chart column

柱状图表，加上个平均统计

1， Chart_URL, 这个必须得设置，可以放在chart 的 url 属性里，或者定义个全局的：

Ext.chart.Chart.CHART_URL = 'Ext/resources/charts.swf';

还有就是，chart 是要放在在服务器端进行访问的，本地的会出错的，之前没有注意到这个问题，以为是设置的问题。

2，定义数据源：

// 学生成绩
var stuScore = [
    {name: "Tom", Maths: 49, Art: 33, PE: 90},
    {name: "Kate", Maths: 33, Art: 46, PE: 78},
    {name: "Lily", Maths: 87, Art: 90, PE: 66},
    {name: "Smith", Maths: 66, Art: 78, PE: 100},
    {name: "Jane", Maths: 58, Art: 74, PE: 68},
    {name: "Herry", Maths: 63, Art: 24, PE: 88},
    {name: "Proon", Maths: 97, Art: 82, PE: 76}
];
// 数据源
var store = new Ext.data.JsonStore({
    fields: ["name", "Maths", "Art", "PE", "Average"], //多一列，计算平均成绩
    data: stuScore,
    listeners: {
        load: function(thisStore, records, options){
            thisStore.each(function(item){
                var average = (item.get("Maths") + item.get("Art") + item.get("PE")) / 3;
                //保留两位小数
                //average = average.toFixed(2);     // 整数的也会保留 *.00
                //average = Math.round(average);    // 取整                    
                average = Math.round(average*100)/100;  
                item.set("Average", average);
            });
        }
    }
});

3，主角来了：

// 创建Panel, 将图标控件放在这个面板容器中
Ext.create({
    xtype: "panel",
    renderTo: Ext.getBody(),
    width: 800,
    height: 500,
    items: [
    // 找不到图表标题的定义方式，先这样凑合着。。。
        {
            xtype: "displayfield",
            value: "标题： 三年级二班期末考试成绩",
            width: 800,
            style: "text-align:center; font-weight:bold; color: #cde;"
        },
    //柱状图表：多列
        {
            xtype: "columnchart",
            store: store,                               
            xField: "name",
            //定义 Y 轴可显示的范围
            yAxis: new Ext.chart.NumericAxis({
                minimum: 0,
                maximum:100,
                majorUnit: 10//,
                //labelRenderer : Ext.util.Format.numberRenderer("0.00")  //数字显示的格式-保留两位小数
            }),
            series: [
                {
                    type: "column",
                    yField: "Maths",
                    displayName: "数学"      // 在图例中显示的名称
                },
                {
                    type: "column",
                    yField: "Art",
                    displayName: "艺术"
                },
                {
                    type: "column",
                    yField: "PE",
                    displayName: "体育",
                    //showInLegend : false,     // 不在图例中显示
                    style: {  
                      color:0x12ee08,   //柱形的颜色
                      size: 20 //柱形的宽度
                    } 
                },
                {   // 线状图显示
                    type: "line",
                    yField: "Average",
                    displayName: "平均成绩"
                }
            ],
            // 自定义鼠标经过柱状图的提示信息
            tipRenderer: function(thisChart, record, index, series){
                var name = record.get("name");
                var subject = series.displayName;
                var score = record.get(series.yField);
                var tip = series.yField == "Average" ? "" : "成绩";
                return String.format("{0} 同学的 {1} {2}为{3}", name,subject,tip,score);
            },
            // 图标样式  -- or extraStyle
            chartStyle: {
                padding: 25,
                // 显示图例
                legend: {
                    display : "top",    //位置
                    spacing: 20     // 图例间距
                }, 
                yAxis: {
                    // 坐标轴 -颜色  
                    color: 0x60a008,                        
                    //坐标轴上的刻度标记
                    majorTicks: {color: 0x0000ff, length: 4},  
                    minorTicks: {color: 0x00ff00, length: 2},
                     // 图表中的网格线 
                    majorGridLines: {size: 1, color: 0xff0000}
                },
                // 提示信息的样式
                dataTip: {
                    border: {
                        color: 0xffffff //边框颜色
                    }
                }
            }
        }
    ]
});

4，效果：

5，参考：

http://atian25.iteye.com/blog/413947

http://xiejin2008.iteye.com/blog/660163

http://blog.csdn.net/ibm_hoojo/article/details/5707588

http://www.cnblogs.com/greatverve/archive/2010/01/25/1655619.html