ExtJS6图表简单demo(折线图，散点图，柱状图)
来源：互联网 发布：上班记录软件app 编辑：程序博客网 时间：2024/05/09 11:42
ExtJS6图表简单demo(折线图，散点图，柱状图)
首先需要引入这三个文件，都懂
<link rel="stylesheet" type="text/css" href="build/classic/theme-triton/resources/theme-triton-all.css" /> <script type="text/javascript" src="build/ext-all.js"> </script> <script type="text/javascript" src="build/packages/charts/classic/charts.js">
官方demo（把线宽度调0就是散点图了吧）
<script type="text/javascript"> Ext.onReady(function() { Ext.create('KitchenSink.view.charts.line.Basic', { renderTo: Ext.getBody() }); }); Ext.define('KitchenSink.view.charts.line.Basic', { extend: 'Ext.Panel', xtype: 'line-basic', controller: 'line-basic', width: 650, items: { xtype: 'cartesian', reference: 'chart', width: '100%', height: 500, interactions: { type: 'panzoom', zoomOnPanGesture: true }, store: { type: 'browsers' }, insetPadding: 40, innerPadding: { left: 40, right: 40 }, sprites: [{ type: 'text', text: '邰志敏上标', fontSize: 22, width: 100, height: 30, x: 40, // the sprite x position y: 20 // the sprite y position }, { type: 'text', text: '邰志敏水印', fontSize: 10, x: 12, y: 470 }, { type: 'text', text: '邰志敏数据支持', fontSize: 10, x: 12, y: 485 }], axes: [{ type: 'numeric', position: 'left', grid: true, minimum: 0, maximum: 24, //这里设置百分比 renderer: 'onAxisLabelRender' }, { type: 'category', position: 'bottom', grid: true, label: { rotate: { degrees: -45 } } }], series: [{ type: 'line', xField: 'month', yField: 'data1', style: { lineWidth: 4 //线的宽度 }, marker: { radius: 4 //散点的radius }, label: { field: 'data1', display: 'over' }, highlight: { fillStyle: '#000', radius: 5, lineWidth: 2, strokeStyle: '#fff' }, tooltip: { trackMouse: true, showDelay: 0, dismissDelay: 0, hideDelay: 0, renderer: 'onSeriesTooltipRender' } }] }, tbar: ['->', { text: '预览', handler: 'onPreview' }] }); Ext.define('KitchenSink.view.charts.line.BasicController', { extend: 'Ext.app.ViewController', alias: 'controller.line-basic', onAxisLabelRender: function(axis, label, layoutContext) { // Custom renderer overrides the native axis label renderer. // Since we don't want to do anything fancy with the value // ourselves except appending a '%' sign, but at the same time // don't want to loose the formatting done by the native renderer, // we let the native renderer process the value first. return layoutContext.renderer(label) + '%'; }, onSeriesTooltipRender: function(tooltip, record, item) { tooltip.setHtml(record.get('month') + ': ' + record.get('data1') + '%'); }, onPreview: function() { var chart = this.lookupReference('chart'); chart.preview(); } }); Ext.define('KitchenSink.store.Browsers', { extend: 'Ext.data.Store', alias: 'store.browsers', // IE Firefox Chrome Safari fields: ['month', 'data1', 'data2', 'data3', 'data4', 'other'], constructor: function(config) { config = config || {}; config.data = [{ month: '一月', data1: 20, data2: 37, data3: 35, data4: 4, other: 4 }, { month: '二月', data1: 20, data2: 37, data3: 36, data4: 5, other: 2 }, { month: '三月', data1: 19, data2: 36, data3: 37, data4: 4, other: 4 }, { month: '四月', data1: 18, data2: 36, data3: 38, data4: 5, other: 3 }, { month: '五月', data1: 18, data2: 35, data3: 39, data4: 4, other: 4 }, { month: '六月', data1: 17, data2: 34, data3: 42, data4: 4, other: 3 }, { month: '七月', data1: 16, data2: 34, data3: 43, data4: 4, other: 3 }, { month: '八月', data1: 16, data2: 33, data3: 44, data4: 4, other: 3 }, { month: '九月', data1: 16, data2: 32, data3: 44, data4: 4, other: 4 }, { month: '十月', data1: 16, data2: 32, data3: 45, data4: 4, other: 3 }, { month: '十一月', data1: 15, data2: 31, data3: 46, data4: 4, other: 4 }, { month: '十二月', data1: 15, data2: 31, data3: 47, data4: 4, other: 3 }]; this.callParent([config]); } }); </script>-柱状图
<script type="text/javascript"> Ext.onReady(function() { Ext.define('WeatherPoint', { extend: 'Ext.data.Model', fields: ['temperature', 'date'] }); var store = new Ext.data.JsonStore({ fields: ['name', 'visits', 'views'], data: [{ name: '日本', visits: 245000, views: 3000000 }, { name: '韩国', visits: 240000, views: 3500000 }, { name: '泰国', visits: 355000, views: 2000000 }, { name: '伊朗', visits: 375000, views: 3200000 }, { name: '法国', visits: 590000, views: 3500000 }, { name: '德国', visits: 395000, views: 6800000 }, { name: '中国', visits: 580600, views: 8500000 }] }); Ext.create('Ext.chart.Chart', { renderTo: Ext.getBody(), width: 500, height: 300, store: store, // axes: [{ type: 'numeric', position: 'left', title: 'DGP总量', grid: { odd: { opacity: 1, fill: '#ddd', stroke: '#bbb', lineWidth: 1 } }, minimum: 0 }, { type: 'category', position: 'bottom', label: { rotate: { degrees: 315 } } }], //series负责画线 //叠加显示 /*series: [{ type: 'bar', xField: 'name', yField: ['visits', 'views'] }],*/ //单独显示 series: { type: 'bar', stacked: false, title: ['Previous Year', 'Current Year'], xField: 'name', yField: ['visits', 'views'], label: { field: ['visits', 'views'], display: 'insideEnd', renderer: 'onSeriesLabelRender' }, highlight: true, style: { //柱子间距离 inGroupGapWidth: 7 } } //theme: 'Green', }); }); </script>折线图
<script type="text/javascript"> Ext.onReady(function() { Ext.define('WeatherPoint', { extend: 'Ext.data.Model', fields: ['temperature', 'date'] }); var store = Ext.create('Ext.data.Store', { model: 'WeatherPoint', data: [{ temperature: 58, date: new Date(2011, 1, 1, 8) }, { temperature: 63, date: new Date(2011, 1, 1, 9) }, { temperature: 73, date: new Date(2011, 1, 1, 10) }, { temperature: 78, date: new Date(2011, 1, 1, 11) }, { temperature: 81, date: new Date(2011, 1, 1, 12) }] }); Ext.create('Ext.chart.Chart', { renderTo: Ext.getBody(), width: 400, height: 300, store: store, // axes: [{ title: 'Temperature', type: 'numeric', position: 'left', fields: ['temperature'], minimum: 0, maximum: 100 }, { title: 'Time', type: 'time', position: 'bottom', fields: ['date'], groupBy: 'hour', dateFormat: 'ga' }], //series负责画线 series: [{ type: 'line', xField: 'date', yField: 'temperature' }], theme: 'Green', }); }); </script> 0 0
- ExtJS6图表简单demo(折线图，散点图，柱状图)
- android 开源图表库MPChart最简单使用方法示例教程Demo--折线图 柱状图
- Echarts 绘制简单的图表柱状图、折线图
- Android图表超简单实现柱状图、折线图、饼状图（基于MpAndroidChart）
- Android图表超简单实现柱状图、折线图、饼状图（基于MpAndroidChart）
- 【微信小程序经验】各类图表相关组件+Demo源码（折线图，柱状图，K线，分时图）
- echart统计图表折线图demo
- MPAndroidChart 图表柱状图，折线图，和组合图
- #.JFreeChart 图表生成实例(饼图、柱状图、折线图、时序图)
- jfreeChar 绘制图表(含柱状图、折线图、饼状图)
- aChartEngine图表显示（饼图、柱状图、折线图）
- MPAndroidChart开源图表库，柱状图和折线图CombinedChart
- 【GraphMaker】Unity3D图表——柱状图、折线图、饼图
- Echarts绘制折线图柱状图混合图表练习
- MPAndroidChart绘制折线图柱状图混合图表练习
- 柱状图/ 折线图 总结
- jfreechart柱状图+折线图
- iOS 柱状图 折线图
- Spring带给我们什么
- html+css3实现精美导航
- 找到第N个丑数
- MFC 颜色对话框
- monkey test备忘
- ExtJS6图表简单demo(折线图，散点图，柱状图)
- [李景山php]每天laravel-20160908|Dispatcher-8
- <幼儿园数学>数列递推<一>
- Java hashCode的重要性
- 全球移动技术大会2016PPT下载合集
- Apache-web多项目部署简单流程
- Android开发笔记（一百零八）智能语音
- Behavioral Patterns Part 2/11: Command Pattern
- 鼠标悬浮时发生的效果改变
