chart绑定mysql数据源_MSChart图表之Chart组件 学习一篇(5个主要属性+数据源绑定)...
前沿:简单练习效果----
一、5大属性简介:
整个图形控件主要由以下几个部份组成:1.Annotations
--图形注解集合
2.ChartAreas
--图表区域集合
3.Legends --图例集合
4.Series
--图表序列集合(即图表数据对象集合)
5.Titles --图标的标题集合
Annotations注解集合
Annotations是一个对图形的一些注解对象的集合,所谓注解对象,类似于对某个点的详细或者批注的说明,比如,在图片上实现各个节点的关键信息,如下图方框和黄色的小方框:
一个图形上可以拥有多个注解对象,可以添加十多种图形样式的注解对象,包括常见的箭头、云朵、矩行、图片等等注解符号,通过各个注解对象的属性,可以方便的设置注解对象的放置位置、呈现的颜色、大小、文字内容样式等常见的属性。ChartAreas图表区域集合
ChartAreas可以理解为是一个图表的绘图区,例如,你想在一幅图上呈现两个不同属性的内容,一个是用户流量,另一个则是系统资源占用情况,那么你要在一个图形上绘制这两种情况,明显是不合理的,对于这种情况,可以建立两个ChartArea,一个用于呈现用户流量,另一个则用于呈现系统资源的占用情况。
当然了,图表控件并不限制你添加多少个绘图区域,你可以根据你的需要进行添加。对于每一个绘图区域,你可以设置各自的属性,如:X,Y轴属性、背景等。
需要注意的是,绘图区域只是一个可以作图的区域范围,它本身并不包含要作图形的各种属性数据。
多绘图区效果图如下,分为上下两个绘图区域,分别表示不同的绘图数据:
ChartAreas显示类型有2:默认是2D,其一是3D。具体设置参照:
Legends图例集合
Legends是一个图例的集合,即标注图形中各个线条或颜色的含义,同样,一个图片也可以包含多个图例说明,比如像上面说的多个图表区域的方式,则可以建立多个图例,分别说明各个绘图区域的信息。
Series图表序列
图表序列,应该是整个绘图中最关键的内容了,通俗点说,即是实际的绘图数据区域,实际呈现的图形形状,就是由此集合中的每一个图表来构成的,可以往集合里面添加多个图表,每一个图表可以有自己的绘制形状、样式、独立的数据等。
需要注意的是,每一个图表,你可以指定它的绘制区域(见ChartAreas的说明),让此图表呈现在某个绘图区域,也可以让几个图表在同一个绘图区域叠加,如下图:
上面两幅图,分别表示了把图表放在不同的绘制区域和放在同一个绘制区域的情况。
继续回到ChartAreas章节举的例子,同时要显示用户的流量还要显示系统的占用情况,对于这种时候,应该建立两个Series,一个用于呈现用户的流量,另一个则用于呈现系统的占用情况。它们分别属于各自的绘图区域。
Titles标题合集
根据字面含义即可以理解,是图表的标题配置,同样可以添加多个标题,以及设置标题的样式及文字、位置等属性。多看一下它的属性即能明白各自的含义。
三。其它属性
相对来说,我觉得比较有用的属性有三个,分别是:Label、Tooltip以及Url链接。
Label即标签的含义,可以在图片的关键位置进行一些关键数字或文字的描述,如下图:
像上图:X轴和Y轴的文字便是标签,以及图表曲线中的红点上的文字,也是标签,添加了标签,可以让人更容易的对内容进行理解。
Tooltip即提示的含义,用于在各个关键点,如:标签、图形关键点、标题等当鼠标移动上去的时候,提示用户一些相关的详细或说明信息,例如上图,可以给曲线中的每一个点增加Tooltip的属性,写上需要详细说明的内容,比如:详细的销售明细,那么,在鼠标移动到这个点的时候,会自动弹出提示信息。
Tooltip可以支持简单方式以及自定义的方式,简单方式即像平时Html页面设置的title之类的属性效果,而自定义的方式,则可以实现图形、文本等各种复杂的提示信息显示。详细的方式请参考官方例子的:Interactivity
and AJAX/Tooltips以及Interactivity and AJAX/Client Side
Scripts下面的相关例子。
Url链接,图表控件中,有一大半的控件都有Url及Tooltip的属性,你可以设置此属性,在鼠标点击的时候,代到其它相应的页面去。
二、数据源 简介
说到绘制图表,可能很多人的第一反应除了是图表呈现的方式外,更关心的便是数据如何添加,记得在很多年前,哪时要绘制一个数据曲线图,一直找不到好的呈现方式,后来使用了SVG的绘图模式,不过在添加数据的时候可谓吃尽了苦头,毕竟,SVG只是一种描述语言,要动态的实现一个图表的绘制,是非常困难的.对于微软的图表控件,数据添加是一件很简单的方式,它支持多种数据添加方式,如:
可以在图表的设计界面,在属性设置窗口中的Series属性下的Points中添加需要的数据.
可以在图表的设计界面中,在属性中绑定一个数据源.
可以在后台代码中,动态添加数据.
可以在后台代码中设置一个或多个数据源,直接绑定到图表中.
第1,2两种比较简单,主要看一下3,4的用法!对于第3点,相对来说比较简单,在后台代码中,找到要添加代码的Series,通过它下面Points的Add、AddXY、AddY等方法,即可以实现数据的添加.例如: -->double t;for(t = 0; t <= (2.5 * Math.PI); t += Math.PI/6) {double ch1 = Math.Sin(t);double ch2 = Math.Sin(t-Math.PI/2); Chart1.Series["Channel 1"].Points.AddXY(t, ch1); Chart1.Series["Channel 2"].Points.AddXY(t, ch2); }
(Chart1为图表的名字,Channel 1、Channel 2分别表示两个Series数据序列)
(有几个series,X轴上就有几个不同的柱子,这里有两个,所以有两个!)
简单练习效果:(图表中有数学、语文、英语3个series,X抽是学生姓名。)
后台数据绑定:
完!
chart绑定mysql数据源_MSChart图表之Chart组件 学习一篇(5个主要属性+数据源绑定)...相关推荐
- Chart.js与ECharts.js图表组件对比与使用
Chart.js与ECharts.js图表组件对比与使用 常用的 图表组件 Chart.js与ECharts.js的简要介绍与使用. Chart.js Chart.js官方网址.里面包括文档.例子和G ...
- chart.js基本知识——调整图表尺寸
<chart.js使用学习 >最后提到测试过程中发现调用chart.js绘制的图表会自动充满父容器.如果canvas直接放在body标签下,则图标会充满整个页面,即便设置canvas的 ...
- HTML5——Canvas图表插件 chart.js的基础使用
Canvas图表插件 推荐三种比较好用的. chart.js 灵活.可个性化设置图表样式的js图表插件 chartist.js 配置简单,只需要设置数据即可,包是最小的. HighCharts.js ...
- C#图表开发——Chart
Overview C#中,开发图表功能的控件是Chart,而Chart控件有两个重要的属性,Series和ChartArea.Series属性是SeriesCollection类型,内部封装了一个集合 ...
- 用js绘制html5数值曲线,Chart.js 教程绘制曲线图(Line chart)
Chart.js是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库.它非常简单帮你展现各种数据的图表展现形式,我们今天看看如何引入和基本的操作,并用它绘制一个制曲线图(Line chart). ...
- QT绘制带有数据源的图表
QT绘制带有数据源的图表 项目简介 项目技术 项目展示 主要源码片段解析 获取完整项目源码传送门 项目简介 QML将XmlListModel用作图表的数据源. 项目技术 qt5.12,qt chart ...
- c combobox绑定mysql数据库_C# ComboBox:组合框控件数据绑定
在 Windows 应用程序中很多控件都提供了 DataSource 属性,并将 DataSet 或 DataTable 的值直接赋给该属性,这样在控件中即可显示从数据库中查询出来的数据. 常用的数据 ...
- java Servlet mysql json ECharts图表生成实战-罗绍岗-专题视频课程
java Servlet mysql json ECharts图表生成实战-2561人已学习 课程介绍 java WEB程序图表生成柱状图表.折线图表,echarts 动态获取Mysq ...
- Python 框架 之 Django 绑定 MySql ,MVT 实现简单一个简单的浏览器(内附详细步骤)
Python 框架 之 Django 绑定 MySql ,MVT 实现简单一个简单的浏览器(内附详细步骤) 目录
最新文章
- Java项目:家教管理系统(java+SSM+MyBatis+MySQL+Maven+Jsp)
- 深度学习之卷积神经网络(5)表示学习
- [程序设计语言] 堆和栈的全面总结
- win7电脑0x000007b蓝屏怎么办
- Node.js入门笔记
- 无基础学python能干什么-呼市学Python语言能干什么
- python小白从哪来开始-python 从小白开始 - 内置函数
- 图像处理代码合集:特征提取-图像分割-分类-匹配-降噪
- oracle asm 加盘,ASM添加磁盘最佳实践
- Unity3D for iOS初级教程:Part 3/3
- PHP多功能自动发卡平台源码带手机版 带多套商户模板
- 微信开发者工具添加企业微信小程序模拟器
- 详细流程,新手做情感视频,上个月收入6千,适合没才艺的普通人
- 学习jQuery这一篇就够了
- 10大主流压力测试工具推荐
- SoundPlayer 播放无声音解决方案
- python 图像识别实现四川麻将回放牌面数据
- weakauras教程_魔兽世界:WeakAuras 教程3利用WA基础完成标准监控套件
- 关于Ext中EditorGridPanel数据校验
- 完全背包问题(二维数组)
热门文章
- 编码 Unicode utf-8
- 上周热点回顾(5.16-5.22)
- Parameter 对象
- 牛客网(剑指offer) 第二十二题 从上往下打印二叉树
- sqli-lib1-36关 精选篇
- Tomcat容器、JSP和Servlet
- android扫码支付宝ofo,六大共享单车接入支付宝 ofo等免押金扫一扫可骑走
- [网络安全自学篇] 四十.phpMyAdmin 4.8.1后台文件包含缺陷复现及防御措施(CVE-2018-12613)
- [网络安全自学篇] 三十三.文件上传之绕狗一句话原理和绕过安全狗(六)
- [Python学习] 专题五.列表基础知识 二维list排序、获取下标和处理txt文本实例