博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ExtJS+ASP.NET自己定义曲线
阅读量:7062 次
发布时间:2019-06-28

本文共 3733 字,大约阅读时间需要 12 分钟。

第一步:创建Store数据源

var myData = [];    myData.push({ 'name': '1', 'Oil_Production': '30', 'Water_Injection': '55', 'Gas_Production': '23' });    myData.push({ 'name': '2', 'Oil_Production': '20', 'Water_Injection': '25', 'Gas_Production': '63' });    myData.push({ 'name': '3', 'Oil_Production': '20', 'Water_Injection': '25', 'Gas_Production': '63' });    myData.push({ 'name': '4', 'Oil_Production': '20', 'Water_Injection': '25', 'Gas_Production': '63' });    myData.push({ 'name': '5', 'Oil_Production': '20', 'Water_Injection': '25', 'Gas_Production': '63' });    myData.push({ 'name': '6', 'Oil_Production': '20', 'Water_Injection': '25', 'Gas_Production': '63' });    myData.push({ 'name': '7', 'Oil_Production': '20', 'Water_Injection': '25', 'Gas_Production': '63' });    myData.push({ 'name': '8', 'Oil_Production': '20', 'Water_Injection': '25', 'Gas_Production': '63' });    myData.push({ 'name': '9', 'Oil_Production': '20', 'Water_Injection': '25', 'Gas_Production': '63' });    myData.push({ 'name': '10', 'Oil_Production': '20', 'Water_Injection': '25', 'Gas_Production': '63' });    myData.push({ 'name': '11', 'Oil_Production': '20', 'Water_Injection': '25', 'Gas_Production': '63' });    myData.push({ 'name': '12', 'Oil_Production': '20', 'Water_Injection': '25', 'Gas_Production': '63' });    store1 = Ext.create('Ext.data.Store', {        fields: ['name', 'Oil_Production', 'Water_Injection', 'Gas_Production'],        data: myData    });
第二步:创建曲线

Ext.require('Ext.chart.*');Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit', 'Ext.window.MessageBox']);Ext.onReady(function () {    //store1.loadData(generateData(8));    var chart = Ext.create('Ext.chart.Chart', {        renderTo: Div3,        width: 500,        height: 300,        style: 'background:#fff',        animate: true,        store: store1,        shadow: true,//赋予线条阴影效果        theme: 'Category1',        legend: {            position: 'right'        },        axes: [{            type: 'Numeric',            minimum: 0,            position: 'left',            fields: ['Oil_Production', 'Water_Injection', 'Gas_Production'],            title: '日产油',            minorTickSteps: 0.1,            grid: {                odd: {                    opacity: 1,                    fill: '#ddd',                    stroke: '#bbb',                    'stroke-width': 0.5                }            }        }, {            type: 'Category',            position: 'bottom',            fields: ['name'],            title: '月份'        }],        series: [{            type: 'line',//说明这里是折线图            highlight: {                size: 7,                radius: 7            },            axis: 'left',            xField: 'name',            yField: 'Oil_Production',            markerConfig: {                type: 'circle',//关键转折点的类型                size: 4,                radius: 4,                'stroke-width': 0            }        }, {            type: 'line',            highlight: {                size: 7,                radius: 7            },            axis: 'left',            smooth: true,            xField: 'name',            yField: 'Water_Injection',            markerConfig: {                type: 'circle',                size: 4,                radius: 4,                'stroke-width': 0            }        }, {            type: 'line',            highlight: {                size: 7,                radius: 7            },            axis: 'left',            smooth: true,            xField: 'name',            yField: 'Gas_Production',            markerConfig: {                type: 'circle',                size: 4,                radius: 4,                'stroke-width': 0            }        }]    });});

转载地址:http://djnll.baihongyu.com/

你可能感兴趣的文章
保险领域网络安全形势最严峻
查看>>
金融创新推动资产管理公司发展
查看>>
《精通Spring MVC 4》——1.7 错误与转码配置
查看>>
《Spark大数据分析:核心概念、技术及实践》一1.7 总结
查看>>
警惕一大波银行类木马正在靠近,新型BankBot木马解析
查看>>
并发集合(三)使用阻塞线程安全的列表
查看>>
【深度分解】听趣拍云产品经理剖析视频基础知识(1)
查看>>
股票K线图
查看>>
C语言项目参考解答:全正整数后再计算
查看>>
关于IT之家的说明
查看>>
第二热门语言:从入门到精通,Python数据科学简洁教程
查看>>
四方联合启动医保移动支付试点 激活移动医疗产业链
查看>>
识别诈骗邮件
查看>>
数据结构例程——选择排序之堆排序
查看>>
Python2 爬虫(一) -- 人生第一条蠕动的爬虫
查看>>
从IaaS到AI,马云为何让阿里云去扛人工智能大旗?
查看>>
如何做好自动化测试,揭秘阿里巴巴分层自动化实践之路
查看>>
开源大数据周刊-第20期
查看>>
jquery ajax分页 js对象
查看>>
phalapi-进阶篇6(解决大量数据存储数据库分表分库拓展)
查看>>