从 http://www.infosoftglobal.com/ 站点下载免费版本到本地,解压到本地,取出 JSClass目录和Charts 目录下所有文件拷贝到你的网站chart目录下,即可开始FusionCharts的使用之旅。
的 XML 数据支持中文
在某些情况下,我们可能需要动态生成 XML 数据来驱动 FusionCharts,比如从数据库中获取数据。在这种情况下,如果你的后端代码是用 PHP 编写的,可以使用以下方法确保输出的 XML 包含正确的 BOM 标识:
```php
header('Content-Type: text/xml; charset=utf-8');
echo "\xEF\xBB\xBF"; // 添加 UTF-8 BOM 标识
echo '<graph caption="月销售历史"...'; // 你的 XML 数据
```
如果是 Java 或其他语言,确保设置正确的字符编码。例如,在 Java 中,你可以使用 `OutputStreamWriter` 并指定 `UTF-8` 编码:
```java
OutputStream out = response.getOutputStream();
OutputStreamWriter writer = new OutputStreamWriter(out, "UTF-8");
writer.write("<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n");
writer.write("<graph caption='月销售历史' ...>");
writer.flush();
writer.close();
```
三、深入理解 FusionCharts 参数配置
FusionCharts 提供了丰富的参数来定制图表的外观和行为。例如,`caption` 设置图表的标题,`xAxisName` 和 `yAxisName` 分别定义 X 轴和 Y 轴的名称。在 Data.xml 中,每个 `<set>` 元素代表图表的一个数据系列,`name` 属性是系列名称,`value` 是对应的数值,`color` 定义了该系列的颜色。
在 JavaScript 中,可以通过 `FusionCharts` 对象的构造函数传递额外的参数来进一步配置图表,例如:
```javascript
var myChart1 = new FusionCharts(
"chart/FCF_Column3D.swf", // SWF 文件路径
"myChartId", // 图表 ID
"600", // 宽度
"350", // 高度
"false", // 是否使用 HTML5
"chartData", // 数据源 ID,若为空则使用 setDataXML 或 setDataURL
{
"caption": "月销售历史",
"xAxisName": "月份",
"yAxisName": "销售量",
"numberPrefix": "$", // 数值前缀
"showValues": "1", // 显示数据值
"paletteColors": "#AFD8F8,#F6BD0F,#8BBA00,#FF8E46,#008E8E,#D64646,#8E468E,#588526,#B3AA00,#008ED6,#9D080D,#A186BE" // 色调列表
}
);
```
四、FusionCharts 动态数据加载
在实际应用中,数据可能需要实时更新或根据用户交互来改变。FusionCharts 支持两种方式动态加载数据:`setDataXML` 和 `setDataURL`。前者直接传入 XML 字符串,后者则是通过 AJAX 请求新的数据源 URL。
例如,当用户点击按钮时,我们可以使用 `setDataURL` 更新图表数据:
```javascript
document.getElementById('updateButton').addEventListener('click', function() {
myChart1.setDataURL('newData.xml');
});
```
五、FusionCharts 与其他技术的集成
FusionCharts 可以无缝集成到各种 Web 开发框架中,如 ASP.NET、PHP、JSP、Ruby on Rails 等。在这些环境中,通常会将数据处理和渲染图表的任务分离,以便更好地管理代码和优化性能。
六、FusionCharts 的高级特性
除了基本的柱状图,FusionCharts 还提供了线图、饼图、面积图等多种图表类型,以及组合图表、3D 效果、工具提示、缩放、滚动等高级功能。此外,它还支持响应式设计,可以在不同设备和屏幕尺寸上自适应显示。
总结:
FusionCharts 是一款强大的图表库,它通过简单的 XML 数据格式和 JavaScript API 提供了丰富的图表类型和自定义选项。从基础的图表展示到复杂的动态数据交互,FusionCharts 提供了一套完整的解决方案。要充分利用 FusionCharts,需要了解其数据格式、参数配置、动态数据加载以及与其他技术的集成方法。同时,对于中文字符的支持,需要注意 XML 文件的编码设置,确保 BOM 标识的正确添加。