chart學習

時間 2019-11-30

標籤 chart 學習简体版

原文原文鏈接

效果圖：javascript

目錄信息css

graphic.jsphtml

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META HTTP-EQUIV="Pragma"CONTENT="no-cache"/>
<META HTTP-EQUIV="Cache-Control"CONTENT="no-cache"/>
<META HTTP-EQUIV="Expires"CONTENT="0">
<meta name='viewport' content='initial-scale=1.0, maximum-scale=2.0, minimum-scale=1.0' />
<title>extjs圖形學習</title>
<link rel="stylesheet" type="text/css" href="/static/ext-4.1.1a/resources/css/ext-all.css"/>
<script type="text/javascript" src="/static/ext-4.1.1a/ext-all.js"></script>
<!-- 自定義文件，主要是ext代碼的編寫 -->
<script type="text/javascript" src="line.js"></script>
<script type="text/javascript" src="column.js"></script>
<script type="text/javascript" src="columnLine.js"></script>
<style type="text/css">
div{width:400px;height:300px;float:left;}
</style>
</head>
<body>
　　<div id="line_panel"></div>
　　<div id="column2_panel"></div>
　　<div id="column_and_line_panel"></div>
　　<div id="column_panel"></div>
</body>
</html>

line.js(生成折線圖使用)java

Ext.onReady(function(){
    // 定義一個數據對象
    Ext.define("WeatherPoint",{
        extend:'Ext.data.Model',
        fields:['temperature','pm10','date']
    });
    
    // 建立一個數據源
    var vstore = Ext.create('Ext.data.Store',{
        model:'WeatherPoint',
        data:[
            {temperature:58, pm10:100,date:new Date(2011,1,1,8)},
            {temperature:63, pm10:165,date:new Date(2011,1,1,9)},
            {temperature:73, pm10:285,date:new Date(2011,1,1,10)},
            {temperature:78, pm10:235,date:new Date(2011,1,1,11)},
            {temperature:81, pm10:335,date:new Date(2011,1,1,12)},
            {temperature:120,pm10:425,date:new Date(2011,1,1,13)},
            {temperature:90, pm10:450,date:new Date(2011,1,1,14)}
        ]
    });
    
    // 建立圖表
    Ext.create('Ext.chart.Chart',{
        renderTo:'line_panel',
        width:400,
        height:300,
        store:vstore,
        axes:[{
            title:'temperature',
            type:'Numeric',
            position:'left',
            fields:['temperature','pm10'],
            minimum:50,
            maximun:500
        },{
            title: 'Time',
            type: 'Time',
            position: 'bottom',
            fields: ['date'],
            groupBy: 'hour',
            dateFormat: 'ga'
        }],
        series:[{
            type:'line',
            xField:'date',
            yField:'temperature'
        },{
            type:'line',
            xField:'date',
            yField:'pm10'
        }]
    });
});

column.jsjsp

Ext.onReady(function(){

// 建立一個數據源
var store = Ext.create('Ext.data.JsonStore', {
    fields: ['name', 'data','money'],
    data: [
        { name: 'one',   data:120 ,money:85},
        { name: 'two',   data: 125 ,money:85},
        { name: 'three', data:180 ,money:85},
        { name: 'four',  data: 220 ,money:85},
        { name: 'five',  data:162 ,money:85},
        { name: 'six',  data:310 ,money:85},
        { name: 'serven',  data:300 ,money:85}
    ]
});
// 須要渲染的顏色
var colors=['#6E548D','#94AE0A','#FF7348','#3D96AE','#94AE0A','#FF7348','#3D96AE'];
// 建立圖表
Ext.create('Ext.chart.Chart', {
    renderTo: "column_panel",
    width: 400,
    height: 300,
    animate: true,
    background:'#aaa',
    store: store,
    axes: [
        {
            type: 'Numeric',
            position: 'left',
            fields: ['data'],
            label: {
                renderer: Ext.util.Format.numberRenderer('0,0')
            },
            title: 'Sample Values',
            grid: true,
            minimum: 0
        },
        {
            type: 'Category',
            position: 'bottom',
            fields: ['name'],
            title: 'Sample Metrics'
        }
    ],
    series: [
        {
            type: 'column',
            axis: 'left',
            highlight: true,
            tips: {
              trackMouse: true,
              width: 140,
              height: 28,
              renderer: function(storeItem, item) {
                this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' $');
              }
            },
            label: {
              display: 'outside',
              'text-anchor': 'middle',
                field: 'data',
                renderer: Ext.util.Format.numberRenderer('0'),
                orientation: 'vertical',
                color: '#333'
            },
            renderer:function(sprite, record, attributes, index, store){
                attributes.fill=colors[index]; // 定義柱子的顏色
                return attributes;
            },
            // 若是須要根據該柱子對應的數據值，來顯示該柱子的顏色，代碼以下
            /*renderer:function(sprite, record, attributes, index, store){
            // (數據源store)的data數據中第index個對象的屬性xxx(axisY)
                var pm10Temp = store.data.get(index).get(axisY);
                if(pm10Temp<50){
                    attributes.fill=colorArr[0];
                }else if(pm10Temp<150){
                    attributes.fill=colorArr[1];
                }else if(pm10Temp<250){
                    attributes.fill=colorArr[2];
                }else if(pm10Temp<350){
                    attributes.fill=colorArr[3];
                }else if(pm10Temp<420){
                    attributes.fill=colorArr[4];
                }else{
                    attributes.fill=colorArr[5];
                }
                return attributes;
            },*/

//            groupGutter:95,
            gutter:95,
            xField: 'name',
            yField: 'data'
        }
    ]
});
Ext.create('Ext.chart.Chart', {
    renderTo: "column2_panel",
    width: 400,
    height: 300,
    animate: true,
    store: store,
    axes: [
        {
            type: 'Numeric',
            position: 'left',
            fields: ['data','money'],
            label: {
                renderer: Ext.util.Format.numberRenderer('0,0')
            },
            title: 'Sample Values',
            grid: true,
            minimum: 0
        },
        {
            type: 'Category',
            position: 'bottom',
            fields: ['name'],
            title: 'Sample Metrics'
        }
    ],
    series: [
        {
            type: 'column',
            axis: 'left',
            highlight: true,
            tips: {
              trackMouse: true,
              width: 140,
              height: 28,
              renderer: function(storeItem, item) {
                this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' $');
              }
            },
            label: {
              display: 'outside',
              'text-anchor': 'middle',
                field: ['data','money'],
                renderer: Ext.util.Format.numberRenderer('0'),
                orientation: 'vertical', // 控制顯示的label內容是水平顯示仍是垂直顯示
                color: '#333'
            },
            title:['title1','title2'],
//            groupGutter:95,
            gutter:95,
            xField: 'name',
            yField: ['data','money']
        }
    ]
});
});

columnLine.jside

Ext.onReady(function(){

// 建立一個數據源
var store = Ext.create('Ext.data.JsonStore', {
    fields: ['name', 'data'],
    data: [
        { name: 'metric one',   data:120 },
        { name: 'metric two',   data: 125 },
        { name: 'metric three', data:180 },
        { name: 'metric four',  data: 220 },
        { name: 'metric five',  data:162 },
        { name: 'metric six',  data:310 },
        { name: 'metric serven',  data:300 }
    ]
});
    
// 建立圖表
Ext.create('Ext.chart.Chart', {
    renderTo: "column_and_line_panel",
    width: 400,
    height: 300,
    animate: true,
    store: store,
    axes: [
        {
            type: 'Numeric',
            position: 'left',
            fields: ['data'],
            label: {
                renderer: Ext.util.Format.numberRenderer('0,0')
            },
            title: 'Sample Values',
            grid: true,
            minimum: 0
        },
        {
            type: 'Category',
            position: 'bottom',
            fields: ['name'],
            title: 'Sample Metrics'
        }
    ],
    series: [
        {
            type: 'column',
            axis: 'left',
            highlight: true,
            tips: {
              trackMouse: true,
              width: 140,
              height: 28,
              renderer: function(storeItem, item) {
                this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' $');
              }
            },
            label: {
              display: 'outside',
              'text-anchor': 'middle',
                field: 'data',
                renderer: Ext.util.Format.numberRenderer('0'),
                orientation: 'vertical',
                color: '#333'
            },
//            groupGutter:95,
            gutter:95,
            xField: 'name',
            yField: 'data'
        },{
            type:'line',
            xField:'name',
            yField:'data'
        }
    ]
});
});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。