FusionCharts使用示例

最新推荐文章于 2024-05-24 13:39:19 发布

张明运

最新推荐文章于 2024-05-24 13:39:19 发布

阅读量680

点赞数

分类专栏：图表技术文章标签： fusioncharts javascript utf-8

本文链接：https://blog.csdn.net/yongyoumengxiang/article/details/39431013

版权

图表技术专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文是一篇适合FusionCharts新手入门的教程。先在网上下载合适版本的FusionCharts开发包，我在本示例中使用的FusionCharts版本是3.2.1，以下是示例程序的完整目录结构：

FusionChartsExample

|-------Charts

| |---Column3D.swf

|-------Codes

| |---JSChart.html

|-------Data

| |---Column3D_Data.xml

|-------JSClass

|---FusionCharts.js

|---jquery.min.js

Column3D_Data.xml文件的内容如下：

<chart caption='上半年销售量统计' subcaption='For the year 2014' xAxisName='月份' yAxisName='销售量' numberPrefix='$'
       baseFont='微软雅黑' baseFontSize='12'>
  <set label='一月' value='17400' />
  <set label='二月' value='19800' />
  <set label='三月' value='21800' />
  <set label='四月' value='23000' />
  <set label='五月' value='29000' />
  <set label='六月' value='27600' />
</chart>

JSChart.html文件的内容如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>FusionCharts示例</title>
<script language="javascript" src="../JSClass/FusionCharts.js"></script>
</head>

<body>
<div id="column3D_Div" align="center"></div>
<script type="text/javascript">
	var column3D_Chart = new FusionCharts("../Charts/Column3D.swf", "column3D_ChartId", "600", "500");
	column3D_Chart.setDataURL("../Data/Column3D_Data.xml");
	column3D_Chart.render("column3D_Div");
</script>
</body>
</html>

最后用浏览器打开JSChart.html文件，显示图片如下：