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 positiony: 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   Safarifields: ['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>

ExtJS6图表简单demo(折线图，散点图，柱状图)相关推荐

python学习之数据分析(二):Matplotlib库:常用画图技巧, 折线图, 散点图,柱状图,直方图, 饼图
一.Matplotlib之HelloWorld 1. 什么是Matplotlib: 专门用于开发2D图表(包括3D图表) 使用起来及其简单以渐进.交互式方式实现数据可视化 2. matplotlib ...
数据分析基础学习_Matplotlib_常见图形及绘制（折线图/散点图/柱状图/直方图/饼图）
1.3 常见图形及绘制 matplotlib可以绘制折线图.散点图.柱状图.直方图.饼图 1.3.1 常见图形种类及意义折线图:以折线的上升或下降来表示统计量的增减变化的统计图特点:可以显示数据的 ...
Qt Charts 图表组件（折线图）
目录简述折线图简述 QtCharts模块是一组易于使用的图表组件,它基于Qt的GraphicsView架构,其核心组件是QChartView和QChart. 1.QChartView的父类是QG ...
Vue + Echarts(v5.版本)的简单组件封装（折线图、柱状图、散点图、饼/环形图、仪表盘、雷达图）
项目中展示图表的地方很多,不想每次都写一长串的 options配置,就整合了一下常用的配置项,简单封装了一下,也能保证整个系统的图表风格统一,需要调整样式的时候也不用改很多地方 2022-11-07: ...
Matplotlib基础02：散点图、折线图与柱状图
Matplotlib基础02:散点图.折线图与柱状图散点图散点图Scatter: 是数据点在直角坐标系中的分布图,可以让我们对数据分析规律,得到数据变化的趋势,进而进行数据分组. API:scat ...
2种Android图表的简单介绍+折线图、饼图的例子，字节跳动移动架构师学习笔记
setTitle("PieChartActivity"); pie = (PieChart) findViewById(R.id.pie); //②输入数据 //其中两个数字对应的 ...
excel分析图表制作，如何轻松创建折线图、柱状图、饼图
在Excel中通过数据间的关系选择合适的图表,轻松创建折线图.柱状图.饼图使其表达的主题和内容更加简单清晰. 下面我们通过Smartbi大数据分析工具介绍excel分析图表制作方法,如何制作常用的图 ...
python生成折线图怎么对特定点做颜色_python使用matplotlib绘制简单的折线图和散点图...
生成数据数据可视化数据可视化指的是通过可视化表示来探索数据,它与数据挖掘机密相关. 安装matplotlib 请访问https://pypi.python.org/pypi/matplotlib/ ...
用户数据销售额分析动态大屏看板+大屏数据可视化图表组件（折线图+圆柱图+散点图+饼图+漏斗图+雷达图+水位图）+智能web端高保真大数据动态可视化大屏看板+中国动态地图+智慧电商实时动态数据大屏看板
作品内容:用户数据销售额分析动态大屏看板+大屏数据可视化图表组件(折线图+圆柱图+散点图+饼图+漏斗图+雷达图+水位图)+web端高保真大数据动态可视化大屏看板+中国动态地图+电商实时动态数据大屏看板 ...

ExtJS6图表简单demo(折线图，散点图，柱状图)

ExtJS6图表简单demo(折线图，散点图，柱状图)

ExtJS6图表简单demo(折线图，散点图，柱状图)相关推荐

最新文章

热门文章