flex柱状图和折线图的混合图使用
<?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <!--[CDATA[ import mx.collections.ArrayCollection; [Bindable] public var data1:ArrayCollection=new ArrayCollection([{date:"10月1日", all:4001.87}, {date:"10月2日", all:4005.74}, {date:"10月3日", all:4002.77}, {date:"10月4日", all:4008.06},]); [Bindable] public var data2:ArrayCollection=new ArrayCollection([{date:"10月1日", sale:157.59}, {date:"10月2日", sale:158.23}, {date:"10月3日", sale:150.71}, {date:"10月4日", sale:156.88},]); [Bindable] public var data3:ArrayCollection=new ArrayCollection([{date:"10月1日", offer:124.14}, {date:"10月2日", offer:160.3}, {date:"10月3日", offer:122.71}, {date:"10月4日", offer:136.88},]); ]]--> </mx:Script> <mx:Panel title="多轴图表" fontSize="14"> <!--以柱形图表为基础, 第一类数据来源于data1 第二类数据来源于data2--> <mx:ColumnChart id="myChart" showDataTips="true" fontSize="14"> <!--共用X轴,数据来源于data1中的date--> <mx:horizontalAxis> <mx:CategoryAxis dataProvider="{data1}" categoryField="date"/> </mx:horizontalAxis> <mx:verticalAxis> <!--设定左边Y轴坐标的数值范围 --> <mx:LinearAxis minimum="4000.00" maximum="4010.00"/> </mx:verticalAxis> <mx:series> <mx:ColumnSeries id="cs1" dataProvider="{data1}" xField="date" yField="all" displayName="大盘指数"/> </mx:series> <mx:secondVerticalAxis> <!--设定Y轴坐标的数值范围 --> <mx:LinearAxis minimum="110" maximum="170"/> </mx:secondVerticalAxis> <!--定义第二个Series --> <mx:secondSeries> <mx:LineSeries id="cs2" dataProvider="{data2}" xField="date" yField="sale" displayName="交易量"/> <mx:LineSeries id="cs3" dataProvider="{data3}" xField="date" yField="offer" displayName="offer量"/> </mx:secondSeries> </mx:ColumnChart> </mx:Panel> </mx:Application>
效果图
转载于:https://www.cnblogs.com/secbook/archive/2009/10/18/2655240.html
flex柱状图和折线图的混合图使用相关推荐
- 百度地图 点击地图类型控件切换普通地图、卫星图、三维图、混合图(卫星图+路网),右下角是缩略图
百度地图 点击地图类型控件切换普通地图.卫星图.三维图.混合图(卫星图+路网),右下角是缩略图 <!DOCTYPE html> <html> <head> < ...
- 百度地图实现普通地图、卫星图、三维图、混合图(卫星图+路网)
普通街道视图:BMAP_NORMAL_MAP 三维视图:BMAP_PERSPECTIVE_MAP 卫星视图:BMAP_SATELLITE_MAP 卫星和路网的混合视图:BMAP_HYBRID_MAP ...
- pyecharts-动态可视化(2) 柱状图 时间轴/折线/堆叠/水印/瀑布图
pyecharts中 柱状图的形式 应该基本就在这了!!代码可以直接运行~超级详细的注释,还有动图呢!! 在制作柱状图可能会遇到的组合,所需用到的代码均做了注释,用的V1版本.非常的小白,非常的友好! ...
- poj 1637(混合图求欧拉回路)
参考博客:http://www.cnblogs.com/destinydesigner/archive/2009/09/28/1575674.html 1 定义 欧拉通路 (Euler tour)-- ...
- Python-matplotlib画图,柱状图,双柱图,折线图,散点图,饼图,线柱混合图。附代码模板与详细注释
自己整理注释的Python画图合集,包含常见的各种画图类型. 1.Python 饼状图 import numpy as np # 加载数学库用于函数描述 import matplotlib.pyplo ...
- echats实现进度条、饼状图、折线图、柱状图、柱状图和折线图的集合体
记录工作中用到的一些echats图标 1.进度条 有两种方式: a.通过elemnt-ui组件el-progress组件实现 上面的进度条光使用el-progress无法实现,el-progress不 ...
- 【Echarts】Vue项目使用echarts详细教程,暗色系柱状图,折线图,环形图等详细配置代码
文章目录 一.引入 echarts 二.效果图及其详细代码 2.1.双柱柱状图 2.2.折柱混合图 2.3.堆叠柱状图 2.4.嵌套环形图 2.5.普通环形图 一.引入 echarts echarts ...
- vue - vue中使用echart实现柱状图和折线图
vue中使用echart实现柱状图和折线图,所用到的数据会放到最后面,在costRate.js里面: 1,先看效果图 一些重要注释我都写到代码里面了:第一个图柱状图,第二个是折线图 2,代码实现 &l ...
- vue3中,echarts使用(一)——柱状图和折线图的结合使用
vue3中,echarts使用(一)--柱状图和折线图的结合使用 官网:https://echarts.apache.org/zh/index.html 官网示例:https://echarts.ap ...
最新文章
- 动手学深度学习(二)
- 1.4 @SuppressWarnings:抑制编译器警告
- Georgia and Bob POJ - 1704
- 图像极坐标变换及在OCR中的应用
- SpringBoot:第一篇 新建spring boot 应用
- 接口接收数据_你知道RS232与RS485接口的区别吗?
- 海量数据处理分析经验和技巧
- c语言 while 怎样用,C语言 while 的用法
- OutMan——Foundation框架中的NSDate类、NSCalendar类以及NSFileManager类
- kotlin-android-extensions过时了,迁移到ViewBinding
- 冬瓜哥祝大家新年快乐!
- 2021湖北技能高考文化综合成绩查询,2021年湖北省技能高考文化综合考试大纲.pdf...
- 苹果4怎么越狱_什么是刷机?什么是越狱?刷机和越狱是一回事吗?
- Facebook和Heroku结成伙伴关系
- MFC添加加瓦系列一之MFC水平与垂直布局
- 网络中国象棋对战中象棋的规则以及棋盘、棋子的Java源码
- 联合金投P9办公自动化解决方案[1]
- 面试题9:AJAX是什么【JS】
- 小迪安全培训2023期笔记汇总-持续更新
- 计算机办公软件培训策划,计算机办公软件应用培训教学计划
热门文章
- dedecms怎么改php版本_玩转Termux:手把手教你在手机上安装php与nginx!
- STL源码剖析 第八章 配接器
- 从一次换机器的过程谈软硬件的分离
- 你的代码(软件)安全吗?【信息图】
- 如何给FLV文件加字幕
- 解决:java.lang.NoSuchMethodException: gentle.entity.User.<init>()
- 各种学习资源 文档、手册 (Docker 、springboot 、Guava、git、logback 、Linux 、MQ、vue、Axios)
- 消息队列技术介绍 : ActiveMQ、RabbitMQ、ZeroMQ、Kafka、MetaMQ、RocketMQ
- CSS Framework 960 Grid System (收)
- 前言_工作两年自我感触