Ext写的一个折线图

最新推荐文章于 2021-05-21 16:45:41 发布

Fichel

最新推荐文章于 2021-05-21 16:45:41 发布

阅读量3.4k

点赞数 1

分类专栏：知识总结

本文链接：https://blog.csdn.net/wsf861559021/article/details/12509469

版权

知识总结专栏收录该内容

3 篇文章 0 订阅

订阅专栏

先看一下效果图：

现在显示的是三条曲线，可以通过修改TipsChart.js来实现线的条数，运用Ext，首先需要的就是引入Ext中的相关文件，这个就不提了，相信对Ext有所了解的都知道需要引那几个文件

下面贴上代码：

index.jsp------------------------------

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/Ext/resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/Ext/resources/css/example.css" />
    <style>
        .x-tip {
        background-color: #fff;
        border-radius: 0.5em;
        -moz-border-radius: 0.5em;
        -webkit-border-radius: 0.5em;
        border-radius: 0.5em;
        border: 1px solid rgba(134, 84, 41, 0.5);
        opacity: 0.95;
    }
    .x-tip-header {
        margin-bottom: 5px;
    }
    .x-tip .x-panel .x-panel-body.x-layout-fit {
        border: none;
    }
    .x-tip .x-panel.x-grid-section.x-panel-noborder.x-fit-item {
        margin: 0;
    }
    .x-tip .x-panel.x-box-item {
        top: 0 !important;
    }
    .x-tip-header-body .x-component.x-box-item {
        width: 100%;
        text-align: center;
    }
    .x-tip-body {
        text-shadow: none;
    }
    .x-panel {
            margin: 20px;
        }
    ul {
        margin-left: 10px;
    }
    ul li {
        display: block;
        font-weight: normal;
        color: #444;
        padding: 2px;
    }
    h1 {
        font-size: 18px;
        margin: 10px;
    }
    </style>
    <script type="text/javascript" src="${pageContext.request.contextPath }/Ext/bootstrap.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/Ext/example-data.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/Ext/TipsChart.js"></script>
  </head>
  <body id="docbody">
  </body>
</html>

TipsChart.js

Ext.require('Ext.chart.*');
Ext.require('Ext.layout.container.Fit');

Ext.onReady(function () {
    var panel1 = Ext.create('widget.panel', {
        width: 800,
        height: 400,
        title: '曲线图',
        renderTo: Ext.getBody(),
        layout: 'fit',
        items: [{
            xtype: 'chart',
            animate: true,
            shadow: true,
            store: store1,
            legend: {
               position: 'right'
            },
            axes: [{
                type: 'Numeric',
                minimum: 0,
                position: 'left',
                fields: ['2011', '2012', '2013'],
                title: '百分比',
                minorTickSteps: 1,
                grid: {
                    odd: {
                        opacity: 1,
                        fill: '#ddd',
                        stroke: '#bbb',
                        'stroke-width': 0.5
                    }
                }
            }, {
                type: 'Category',
                position: 'bottom',
                fields: 'name',
                title: '2013年物业曲线图'
            }],
             series: [{
                type: 'line',
                axis: 'left',
                gutter: 80,
                xField: 'name',
                yField: '2011',
                markerConfig: {
                    type: 'circle',
                    'stroke-width': 0
                }
            },{
                type: 'line',
                axis: 'left',
                smooth: true,
                xField: 'name',
                yField: '2012',
                markerConfig: {
                    type: 'circle',
                    'stroke-width': 0
                }
            },{
                type: 'line',
                axis: 'left',
                smooth: true,
                xField: 'name',
                yField: '2013',
                markerConfig: {
                    type: 'circle',
                    'stroke-width': 0
                }
            }]
        }]
    });
});

其中Ext中自带的example-data.js文件我做了修改：

Ext.onReady(function() {
    window.generateData = function(n, floor){
        var data = [],i;
        for (i = 0; i < (n || 12); i++) {
            data.push({
                name: i+1+'月份',
                2011: Math.floor(Math.max(Math.random() * 100)),
                2012: Math.floor(Math.max(Math.random() * 100)),
                2013: Math.floor(Math.max(Math.random() * 100))
            });
        }
        return data;
    };
    window.store1 = Ext.create('Ext.data.JsonStore', {
        fields: ['name', '2011', '2012', '2013'],
        data: generateData()
    });    
});

好了，所有代码已上传

Fichel

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ext写的一个折线图

先看一下效果图：现在显示的是三条曲线，可以通过修改TipsChart.js来实现线的条数，运用Ext，首先需要的就是引入Ext中的相关文件，这个就不提了，相信对Ext有所了解的都知道需要引那几个文件下面贴上代码：index.jsp------------------------------<%String path = request.getContextPath(
复制链接

扫一扫

专栏目录