AnyChart详细介绍以及事例展示请查看>>
1. 准备工作
i. 下载试用版： http://www.componentcn.com/html/jbtbkj_249_5209.html
ii. 确保操作系统上安装了IIS以及浏览器和Flash Player 9.0或支持SVG
2. 安装好AnyChart后，在IIS的wwwroot文件夹创建一个AnyChartTest文件夹(可随意命名)，然后在该文件夹下创建下面的目录结构：
/AnyChartTest
/swf
AnyChart.swf
/js
AnyChart.js
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(可选)
5 个解决方案
#1
支持一下
#2
好是好，但是加密很差
#3
广告一个
#4
你要的是不是这个？
AnyChart股票和金融图表（简称：AnyStock）是一个基于XML/ JSON Flash的金融图表解决方案。AnyStock技术把你的实时数据变成具有交互功能的高度复杂的图表，把您的数据可视化呈现在网络上。设计用来显示数据和基于时间的信息，AnyStock是理想的用于客户报告和业绩报告应用的工具。报告和仪表板都带有滚动、摘取、平移和缩放功能的可视物。
AnyChart提供多种金融图表类型和技术指标包括SMA，EMA，MACD，布林线和PSAR，指出的只是很少的部分。AnyChart把外汇分析，商品和投资市场数据带到生活。查看长期的、大量的数据的能力可以很容易的通过滚动、平移、缩放控制来实现。添加新闻事件（分析师的意见，内幕交易，股息和重要进展）提高你有效地分析信息的能力。
技术指标和覆盖
AnyChart股票和金融图表（简称：AnyStock）是一个基于XML/ JSON Flash的金融图表解决方案。AnyStock技术把你的实时数据变成具有交互功能的高度复杂的图表，把您的数据可视化呈现在网络上。设计用来显示数据和基于时间的信息，AnyStock是理想的用于客户报告和业绩报告应用的工具。报告和仪表板都带有滚动、摘取、平移和缩放功能的可视物。
AnyChart提供多种金融图表类型和技术指标包括SMA，EMA，MACD，布林线和PSAR，指出的只是很少的部分。AnyChart把外汇分析，商品和投资市场数据带到生活。查看长期的、大量的数据的能力可以很容易的通过滚动、平移、缩放控制来实现。添加新闻事件（分析师的意见，内幕交易，股息和重要进展）提高你有效地分析信息的能力。
技术指标和覆盖
#5
是不是自己得安装一些什么插件呢？ 我的xml文件怎么显示不出来？
下面是我的xml代码
- <anychart>
- <settings>
<animation enabled="false" />
- <context_menu>
<save_as_image_item_text>保存为图片</save_as_image_item_text>
<save_as_pdf_item_text>保存为PDF</save_as_pdf_item_text>
</context_menu>
- <locale>
- <date_time_format>
- <months>
<names>January,February,March,April,May,June,July,August,September,October,November,December</names>
<short_names>Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec</short_names>
</months>
<time am_string="AM" short_am_string="A" pm_string="PM" short_pm_string="P" />
- <week_days start_from="Sunday">
<names>Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday</names>
<short_names>Sun,Mon,Tue,Wed,Thu,Fri,Sat</short_names>
</week_days>
<format>%yyyy/%MM/%dd %HH:%mm</format>
</date_time_format>
</locale>
</settings>
- <charts>
+ <chart plot_type="Scatter">
- <chart_settings>
- <title>
<text>功图曲线</text>
</title>
- <axes>
- <x_axis>
<scale type="String" />
- <labels>
<format>{%Value}</format>
</labels>
- <title>
<text>位移(m)</text>
</title>
</x_axis>
- <y_axis>
- <title>
<text>载荷（KN）</text>
</title>
- <labels>
- <format>
- <![CDATA[ {%Value}{numDecimals:1}
]]>
</format>
</labels>
</y_axis>
</axes>
</chart_settings>
- <data_plot_settings>
- <line_series>
- <line_style>
<line thickness="3" />
<line color="#1D8BD1" />
</line_style>
<marker_settings enabled="false" />
- <tooltip_settings enabled="true">
<format>{%YValue}{numDecimals:1}KN</format>
</tooltip_settings>
</line_series>
</data_plot_settings>
- <data>
- <series name="Series" type="spLine">
<point x="0" y="0" />
</series>
- <series name="SeriesGG" type="spLine">
<point x="0" y="0" />
</series>
</data>
</chart>
</charts>
</anychart>
下面是我的xml代码
- <anychart>
- <settings>
<animation enabled="false" />
- <context_menu>
<save_as_image_item_text>保存为图片</save_as_image_item_text>
<save_as_pdf_item_text>保存为PDF</save_as_pdf_item_text>
</context_menu>
- <locale>
- <date_time_format>
- <months>
<names>January,February,March,April,May,June,July,August,September,October,November,December</names>
<short_names>Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec</short_names>
</months>
<time am_string="AM" short_am_string="A" pm_string="PM" short_pm_string="P" />
- <week_days start_from="Sunday">
<names>Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday</names>
<short_names>Sun,Mon,Tue,Wed,Thu,Fri,Sat</short_names>
</week_days>
<format>%yyyy/%MM/%dd %HH:%mm</format>
</date_time_format>
</locale>
</settings>
- <charts>
+ <chart plot_type="Scatter">
- <chart_settings>
- <title>
<text>功图曲线</text>
</title>
- <axes>
- <x_axis>
<scale type="String" />
- <labels>
<format>{%Value}</format>
</labels>
- <title>
<text>位移(m)</text>
</title>
</x_axis>
- <y_axis>
- <title>
<text>载荷（KN）</text>
</title>
- <labels>
- <format>
- <![CDATA[ {%Value}{numDecimals:1}
]]>
</format>
</labels>
</y_axis>
</axes>
</chart_settings>
- <data_plot_settings>
- <line_series>
- <line_style>
<line thickness="3" />
<line color="#1D8BD1" />
</line_style>
<marker_settings enabled="false" />
- <tooltip_settings enabled="true">
<format>{%YValue}{numDecimals:1}KN</format>
</tooltip_settings>
</line_series>
</data_plot_settings>
- <data>
- <series name="Series" type="spLine">
<point x="0" y="0" />
</series>
- <series name="SeriesGG" type="spLine">
<point x="0" y="0" />
</series>
</data>
</chart>
</charts>
</anychart>
#1
支持一下
#2
好是好，但是加密很差
#3
广告一个
#4
你要的是不是这个？
AnyChart股票和金融图表（简称：AnyStock）是一个基于XML/ JSON Flash的金融图表解决方案。AnyStock技术把你的实时数据变成具有交互功能的高度复杂的图表，把您的数据可视化呈现在网络上。设计用来显示数据和基于时间的信息，AnyStock是理想的用于客户报告和业绩报告应用的工具。报告和仪表板都带有滚动、摘取、平移和缩放功能的可视物。
AnyChart提供多种金融图表类型和技术指标包括SMA，EMA，MACD，布林线和PSAR，指出的只是很少的部分。AnyChart把外汇分析，商品和投资市场数据带到生活。查看长期的、大量的数据的能力可以很容易的通过滚动、平移、缩放控制来实现。添加新闻事件（分析师的意见，内幕交易，股息和重要进展）提高你有效地分析信息的能力。
技术指标和覆盖
AnyChart股票和金融图表（简称：AnyStock）是一个基于XML/ JSON Flash的金融图表解决方案。AnyStock技术把你的实时数据变成具有交互功能的高度复杂的图表，把您的数据可视化呈现在网络上。设计用来显示数据和基于时间的信息，AnyStock是理想的用于客户报告和业绩报告应用的工具。报告和仪表板都带有滚动、摘取、平移和缩放功能的可视物。
AnyChart提供多种金融图表类型和技术指标包括SMA，EMA，MACD，布林线和PSAR，指出的只是很少的部分。AnyChart把外汇分析，商品和投资市场数据带到生活。查看长期的、大量的数据的能力可以很容易的通过滚动、平移、缩放控制来实现。添加新闻事件（分析师的意见，内幕交易，股息和重要进展）提高你有效地分析信息的能力。
技术指标和覆盖
#5
是不是自己得安装一些什么插件呢？ 我的xml文件怎么显示不出来？
下面是我的xml代码
- <anychart>
- <settings>
<animation enabled="false" />
- <context_menu>
<save_as_image_item_text>保存为图片</save_as_image_item_text>
<save_as_pdf_item_text>保存为PDF</save_as_pdf_item_text>
</context_menu>
- <locale>
- <date_time_format>
- <months>
<names>January,February,March,April,May,June,July,August,September,October,November,December</names>
<short_names>Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec</short_names>
</months>
<time am_string="AM" short_am_string="A" pm_string="PM" short_pm_string="P" />
- <week_days start_from="Sunday">
<names>Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday</names>
<short_names>Sun,Mon,Tue,Wed,Thu,Fri,Sat</short_names>
</week_days>
<format>%yyyy/%MM/%dd %HH:%mm</format>
</date_time_format>
</locale>
</settings>
- <charts>
+ <chart plot_type="Scatter">
- <chart_settings>
- <title>
<text>功图曲线</text>
</title>
- <axes>
- <x_axis>
<scale type="String" />
- <labels>
<format>{%Value}</format>
</labels>
- <title>
<text>位移(m)</text>
</title>
</x_axis>
- <y_axis>
- <title>
<text>载荷（KN）</text>
</title>
- <labels>
- <format>
- <![CDATA[ {%Value}{numDecimals:1}
]]>
</format>
</labels>
</y_axis>
</axes>
</chart_settings>
- <data_plot_settings>
- <line_series>
- <line_style>
<line thickness="3" />
<line color="#1D8BD1" />
</line_style>
<marker_settings enabled="false" />
- <tooltip_settings enabled="true">
<format>{%YValue}{numDecimals:1}KN</format>
</tooltip_settings>
</line_series>
</data_plot_settings>
- <data>
- <series name="Series" type="spLine">
<point x="0" y="0" />
</series>
- <series name="SeriesGG" type="spLine">
<point x="0" y="0" />
</series>
</data>
</chart>
</charts>
</anychart>
下面是我的xml代码
- <anychart>
- <settings>
<animation enabled="false" />
- <context_menu>
<save_as_image_item_text>保存为图片</save_as_image_item_text>
<save_as_pdf_item_text>保存为PDF</save_as_pdf_item_text>
</context_menu>
- <locale>
- <date_time_format>
- <months>
<names>January,February,March,April,May,June,July,August,September,October,November,December</names>
<short_names>Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec</short_names>
</months>
<time am_string="AM" short_am_string="A" pm_string="PM" short_pm_string="P" />
- <week_days start_from="Sunday">
<names>Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday</names>
<short_names>Sun,Mon,Tue,Wed,Thu,Fri,Sat</short_names>
</week_days>
<format>%yyyy/%MM/%dd %HH:%mm</format>
</date_time_format>
</locale>
</settings>
- <charts>
+ <chart plot_type="Scatter">
- <chart_settings>
- <title>
<text>功图曲线</text>
</title>
- <axes>
- <x_axis>
<scale type="String" />
- <labels>
<format>{%Value}</format>
</labels>
- <title>
<text>位移(m)</text>
</title>
</x_axis>
- <y_axis>
- <title>
<text>载荷（KN）</text>
</title>
- <labels>
- <format>
- <![CDATA[ {%Value}{numDecimals:1}
]]>
</format>
</labels>
</y_axis>
</axes>
</chart_settings>
- <data_plot_settings>
- <line_series>
- <line_style>
<line thickness="3" />
<line color="#1D8BD1" />
</line_style>
<marker_settings enabled="false" />
- <tooltip_settings enabled="true">
<format>{%YValue}{numDecimals:1}KN</format>
</tooltip_settings>
</line_series>
</data_plot_settings>
- <data>
- <series name="Series" type="spLine">
<point x="0" y="0" />
</series>
- <series name="SeriesGG" type="spLine">
<point x="0" y="0" />
</series>
</data>
</chart>
</charts>
</anychart>