初识 EXT3.0 中的 chart_ext3有画图吗-优快云博客

本文链接：https://blog.youkuaiyun.com/kaihua_86/article/details/4504857

本文介绍了如何使用EXT3.0中的新组件Chart绘制线形图，详细讲解了如何配置JsonStore从后台获取数据并展示图表的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天我们大哥让我学习一下 EXT3.0。说里边有个新组件 chart 让我好好看一下。

在官网上下了个 EXT3.0（http://extjs.com/products/extjs/download.php）。直接解压到 Tomcat 的 Webapps 里边。这样可以在服务器下看 EXT 的 API 和 examples。先看看 examples，里边确实多了一项 chart。打开后发现，chart 分为线形图，饼图等等。今天只把线形图看了。构造线形图必须提供一个 store。store 可以使用本地数据，也可以从后台获取数据。下面是一个从后台获取数据的例子：

test.html

===================================================================================

<head>

Ext.onReady(function() {
    var store = new Ext.data.JsonStore({
        fields:["name", "visits", "views"],
        url:"test.jsp"
    });
store.load();

    // extra extra simple
    new Ext.Panel({
        title: "ExtJS.com Visits Trend, 2007/2008 (No styling)",
        renderTo: "chart",
        width:800,
        height:800,
  url:"resources/charts.swf",
        layout:"fit",
  frame:true,

        items: {
            xtype: "linechart",
            store: store,
            xField: "name",
            yField: "visits",
   listeners: {
    itemclick: function(o){
     var rec = store.getAt(o.index);
     Ext.Msg.alert("Item Selected", "You chose dddddddddddddddddd");
    }
   }
        }
    });
});

</script>

</head>

====================================================================================

test.jsp

====================================================================================

<%@ page contentType="text/html;charset=utf-8"%>
<%
String sb="";
sb+="{";
sb+="root:[{";
sb+="name:'Jul07',visits:245000";
sb+="},{";
sb+="name:'Aug07',visits:205000";
sb+="},{";
sb+="name:'Sep07',visits:115000";
sb+="},{";
sb+="name:'Oct07',visits:255000";
sb+="},{";
sb+="name:'Nov07',visits:345000";
sb+="},{";
sb+="name:'Dec07',visits:315000";
sb+="}]";
sb+="}";

out.print(sb);
%>

===================================================================================

JsonStore 必须和 JSON 对象对应好， JSON 里有 root ，则 JsonStore 里必须指定 root。

横竖坐标的生成和数据类型有关，如果是数值类型的，则自动计算出上限和下限，并根据线形图的大小来选取合适的间隔。图越大，间隔越小。如果是字符类型的，则每项都显示，不过这也是在图的大小足够的情况下才能完全显示。

第一天就看了这么多，上面说的全是自己的看法，不一定正确，算是一个参考吧。

希望大家多多指点。