导读:AnyChart是一款跨平台和跨浏览器的图表控件,通过 XML格式获取数据,该格式给开发人员非常灵活的方式控制图表上的每一个数据点,然而当图表有数以千计的数据点时,会导致XML文件相当大,如果不需要对每个别数据点进行单独的设置,可以采用CSV数据输入,以减小数据文件大小和图表加载时间,在这一节我们将介绍AnyChart如何使用CSV格式数据。
1. 准备工作
i. 下载试用版:http://www.componentcn.com/html/jbtbkj_249_5209.html
ii. 确保操作系统上安装了IIS以及浏览器和Flash Player 9.0或支持SVG
2. 安装好AnyChart后,在IIS的wwwroot文件夹创建一个AnyChartTest文件夹(可随意命名),然后在该文件夹下创建下面的目录结构:
l /AnyChartTest
² /swf
n AnyChart.swf
² /js
n AnyChart.js
n AnyChartHTML5.js
² anychart.xml
² anychart.html
注:
1) swf文件夹用于放置控件提供的swf文件,既AnyChart.swf文件,该文件可以在控件安装目录下找到
2) js文件夹用于放置控件提供的JS文件,同样地这两个JS文件也是控件提供,在控件安装目录下可以找到
3) anychart.xml该文件用于开发人员配置图表,设置图表的各种基本信息,当然还包挎图表所需的数据等
4) anychart.html用于显示图表,可以是ASP, ASP.NET, CF, PHP, CGI, Perl等页面
3. 添加CSV格式的数据集
Anychart可以使用几个CSV数据块,叫作数据集合,该数据集合在XML文件里使用<data_sets>节点定义,该节点作为<anychart>的子节点,每一个数据集则在<csv_data_set name=" ">节点描述,name属性是独一无二用于匹配每一个数据集的,每一个数据集的数据则包含在<csv_data_set> </csv_data_set>里,具体查看下面的XML代码:
<data_sets>
<csv_data_set name="simpleDataSet">
P1,174,5854,3242
P2,197,4171,3171
P3,155,1375,700
P4,15,1875,1287
P5,66,2246,1856
P6,85,2696,1126
P7,37,1287,987
P8,10,2140,1610
P9,44,1603,903
</csv_data_set>
</data_sets>
如上面的数据格式,AnyChart使用逗号用于列分隔符,换行(“\n”)表示行分隔符,CSV数据经常在第一行包含列名,但是AnyChart在<csv_data_set>节点里只能包含数据行。
4. 为图表中的数据序列匹配数据集,在AnyChart中<series>节点表示一个数据序列,每个数据序列都有data_source属性,使用CSV数据格式时,必须设置data_source属性为CSV,在<series>节点下,控件提供了<csv_data_mapping>节点用于为每个数据序列进行CSV数据匹配,该节点下提供了<field>节点,该节点有column属性对应CSV中的某一列,name属性用于对应数据序列的数据列,像下面的代码:
<?xml version="1.0" encoding="UTF-8"?>
<anychart>
<charts>
<chart plot_type="CategorizedVertical">
<chart_settings>
<title enabled="false" />
<axes>
<y_axis>
<title enabled="false" />
</y_axis>
<extra>
<y_axis name="extra_y_axis1">
<title enabled="false" />
</y_axis>
</extra>
</axes>
</chart_settings>
<data>
<series name="Series 1" type="Spline" data_source="CSV" y_axis="extra_y_axis1">
<csv_data_mapping data_set="simpleDataSet">
<field column="0" name="name" />
<field column="1" name="y" />
</csv_data_mapping>
</series>
<series name="Series 2" type="Bar" data_source="CSV">
<csv_data_mapping data_set="simpleDataSet">
<field column="0" name="name" />
<field column="2" name="y" />
</csv_data_mapping>
</series>
<series name="Series 3" type="SplineArea" data_source="CSV">
<csv_data_mapping data_set="simpleDataSet">
<field column="0" name="name" />
<field column="3" name="y" />
</csv_data_mapping>
</series>
</data>
</chart>
</charts>
<data_sets>
<csv_data_set name="simpleDataSet">
P1,174,5854,3242
P2,197,4171,3171
P3,155,1375,700
P4,15,1875,1287
P5,66,2246,1856
P6,85,2696,1126
P7,37,1287,987
P8,10,2140,1610
P9,44,1603,903
</csv_data_set>
</data_sets>
</anychart>
5. 打开anychart.xml文件,复制上面的代码到文件里保存
6. 打开Html文件,复制下面的代码到文件里保存。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>AnyChart Sample</title>
<script type="text/javascript" language="javascript" src="./js/AnyChart.js"></script>
</head>
<body>
<script type="text/javascript" language="javascript">
//<![CDATA[
var chart = new AnyChart('./swf/AnyChart.swf');
chart.width = 500;
chart.height = 400;
chart.setXMLFile('./anychart.xml');
chart.write();
//]]>
</script>
</body>
</html>
7. 运行anychart.html可以看见如下的效果
8. 对于数据集合<data_sets>节点下,还可以包含多个不同的数据集,像下面的代码:
<data_sets>
<csv_data_set name="primaryDataSet"><![CDATA[
Point A,1452
Point B,2101
Point C,3415
Point D,981
Point E,1872
]]></csv_data_set>
<csv_data_set name="secondaryDataSet"><![CDATA[
Point A,671
Point B,162
Point C,431
Point F,362
Point G,287
]]></csv_data_set>
</data_sets>
9. 查看下表,列举出了不同的绘制类型和数据序列对应的name关键词
绘制类型:
CategorizedVertical
CategorizedHorizontal
CategorizedVerticalBySeries
CategorizedHorizontalBySeries
Series Type |
Field Keywords |
Bar |
name, y |
Line |
name, y |
Spline |
name, y |
StepLineForward |
name, y |
StepLineBackward |
name, y |
Area |
name, y |
SplineArea |
name, y |
StepLineForwardArea |
name, y |
StepLineBackwardArea |
name, y |
Marker |
name, y |
Bubble |
name, y, size |
RangeBar |
name, start, end |
RangeArea |
name, start, end |
RangeSplineArea |
name, start, end |
OHLC |
name, high, low, open, close |
Candlestick |
name, high, low, open, close |
绘制类型:Map
Series Type |
Field Keywords |
MapRegion |
name, y |
Marker |
name(optional), x, y, link(optional) |
Bubble |
name(optional), x, y, size, link(optional) |
Line |
name(optional), x, y, size, link(optional) |
Area |
x, y |
Connector |
绘制类型:Scatter
Series Type |
Field Keywords |
Bar |
x, y, name(可选) |
Line |
x, y, name(可选) |
Spline |
x, y, name(可选) |
StepLineForward |
x, y, name(可选) |
StepLineBackward |
x, y, name(可选) |
Area |
x, y, name(可选) |
SplineArea |
x, y, name(可选) |
StepLineForwardArea |
x, y, name(可选) |
StepLineBackwardArea |
x, y, name(可选) |
Marker |
x, y, name(可选) |
Bubble |
x, y, size, name(可选) |
RangeBar |
x, start, end, name(可选) |
RangeArea |
x, start, end, name(可选) |
RangeSplineArea |
x, start, end, name(可选) |
OHLC |
x, high, low, open, close, name(可选) |
Candlestick |
x, high, low, open, close, name(可选) |
发表评论
-
AnyChart图表控件使用指南(五)
2011-10-12 14:27 820坐标轴标签格式化是 ... -
AnyChart图表控件使用指南(四)
2011-10-12 13:41 1075AnyChart是基于XML数据输入,但是仍然可以使用Java ... -
AnyChart图表控件使用指南(三)
2011-10-10 15:10 1457坐标轴是图表不可或缺的元素,坐标轴控制着值、参数比例、 ... -
AnyChart图表控件使用指南(二)
2011-10-08 14:48 7导读:AnyChart是一款跨平台和跨浏览器的图表控件,通过 ... -
AnyChart使用指南(一)
2011-09-29 13:59 1581AnyChart控件是一款当前流行的数据可视化解决方案,使客户 ...
相关推荐
Anychart XMLReference配置的文档说明,离线模式
NULL 博文链接:https://zhuhm.iteye.com/blog/1452059
微软图表控件:安装 控件的安装相对比较简单,下载完后,先执行“MSChart.exe”程序,它会自动检测你的环境,安装到系统目录中去,如果要在VS 2008环境中直接使用,那么需要安装For Vs2008的插件,MSChart_...
wpf中使用图表控件
微软图表控件MsChart使用初探.doc
Visifire图表控件 Visifire图表控件
源码自动生成各种数据后,调用chart控件生成图表的源码程序,仅供测试参考。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
(asp.net MVC 使用chart图表控件的示例
web网页图表控件highchart示例
AnyChart图表个人总结,学习了一周,个人作的一个总结文档,希望对大家有用。
现在搜索不到没有对AnyChart控件的.net事例,漂亮的图表控件动态的控件。 本人原创。
此工具为第三方开发的图表控件,下载后直接安装加载后即可像其他VB控件一样拖到视窗使用。
asp.net 图表控件,速度快,有源码
WebAvail公司出品的图表控件.有了它,你根本不再需要别的图表控件.另外还发布ASP.NET版.需要的朋友搜索的我资源.
MSChart 图表控件 是微软收购的仪表控件 但是在VS2008中还没有封装进去 这里面有MSChart 组件,扩展包,语言包和说明。。
zedGraph c# .net图表控件 不仅包含dll控件还有demo
OFFICE OWC11 图表控件下载 owc11.msi
C# 开源图表控件ZedGraph,ZedGraph.dll,图表控件,显示功能强大,代码简单,比VS自带的chart方便,自带的chart编写代码麻烦,而且在大量数据显示的时候刷新显示很慢,
html5图表控件制作曲线柱形统计图表代码 html5图表控件制作曲线柱形统计图表代码 html5图表控件制作曲线柱形统计图表代码
c#/c++图形控件很少,像这种高性能数据处理的可视化库很难得。