Quick Start

快速入门

这篇文章将带您快速了解Finger Chart的使用方法，如果您没有其它个性化的需求，那么遵循下面的步骤您就可以快速上手。

第一步：下载，解压

请从下载页面下载最新的压缩包（目前版本是0.8），并解压到您项目中的某一目录下面。下表是对解压后文件结构的大致说明：

文件名或目录 说明 readme.html 关于图表的简短说明，并附有一个嵌入图表的示例 plot_chart.swf 散点图的SWF文件 pie_chart.swf 饼图的SWF文件 line_chart.swf 线图的SWF文件 column_chart.swf 柱图的SWF文件 bubble_chart.swf 气泡图的SWF文件 bar_chart.swf 条图的SWF文件 area_chart.swf 区域图的SWF文件 plugin 包含扩展SWF文件的目录 js 包含swfobject.js和finger.js，后者是对finger嵌入方式的JavaScript封装 data 包含虚拟的XML数据，供您参考数据结构

第二步：准备数据

支持两种数据格式：XML和JSON，请参考XML示例和JSON示例。将您的数据转换为图表所支持的格式待用。

第三步：HTML嵌入

首先在HTML的Head区域，引入两个需要的JavaScript文件（依据您实际的路径而定）：

<script type="text/javascript" src="js/swfobject.js"></script> <script type="text/javascript" src="js/finger.js"></script>

声明嵌入图表所需的容器，比如：

chart here

通过CSS约束图表容器的尺寸，比如：

#chartContainer{width:600px;height:300px;border:1px solid #CCC;}

然后调用finger.ouput方法，嵌入图表，代码示例：

//如果需要，请设置图表文件所在的路径 finger.initPath(""); //第一个参数是图表类型，包括：line,column,bar,pie,area,plot,bubble //第二个参数是容器ID //第三个参数是数据源 //第四个参数(可选)是配置对象，比如{plugin:"xx.swf"} finger.output("line","chartContainer","data/xml/linechart_data1.xml");

没有第四步了:)