Web 开发中，主要使用下面两个文件，
-
open-flash-chart.swf: Flash 文件接口，通过该文件来生成 Flash 文件，备页面调用(在 web 目录下，与 WEB-INF 目录并级)。
-
swfobject.js: Flash 文件依赖的 JS 文件(在 web 目录下，与 WEB-INF 目录并级)。
首先在页面中编写 script 脚本,保存页面为 chart.html
<html>
<head>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("open-flash-chart.swf", "my_chart", "250", "200", "9.0.0");
</script>
</head>
<body>
<p>Hello World</p>
<div id="my_chart"></div>
</body>
</html>
编写 JSON 数据
其次，编写图表的 JSON 文本，将该文本保存为 data.json, 放在与 chart.html 同一个目录下。
{
"title":{
"text": "Many data lines",
"style": "{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}"
},
"y_legend":{
"text": "Open Flash Chart",
"style": "{color: #736AFF; font-size: 12px;}"
},
"elements":[
{
"type": "bar",
"alpha": 0.5,
"colour": "#9933CC",
"text": "Page views",
"font-size": 10,
"values" : [9,6,7,9,5,7,6,9,7]
},
{
"type": "bar",
"alpha": 0.5,
"colour": "#CC9933",
"text": "Page views 2",
"font-size": 10,
"values" : [6,7,9,5,7,6,9,7,3]
}
],
"x_axis":{
"stroke":1,
"tick_height":10,
"colour":"#d000d0",
"grid_colour":"#00ff00",
"labels": ["January","February","March","April","May",
"June","July","August","Spetember"]
},
"y_axis":{
"stroke": 4,
"tick_length": 3,
"colour": "#d000d0",
"grid_colour": "#00ff00",
"offset": 0,
"max": 20
}
}
OFC图表展示
在浏览器地址栏输入URL，比如：http://localhost:8080/chart/chart.html?ofc=data.json
, 就可以看到的图表效果。
![]()
分享到：
相关推荐
ROS 入门实例，Do it by yourself, 教程清晰，步骤详细
Qt 学习经典入门实例 Qt 是一个跨平台的应用程序开发框架，由 Nokia 公司开发，主要用于开发 GUI 程序。Qt Designer 是 Qt 中的一个重要组件，用于设计和构建图形用户界面。 Qt 学习经典入门实例 本文将通过一...
MFC 基础 入门 实例 北京邮电大学 visual c++ mfc
"C#入门实例程序.rar" 是一个针对初学者的资源包，它包含了100个精心设计的C#实例程序，旨在帮助新手快速掌握C#的基础知识和编程技巧。 1. **C#基础语法**：在这些实例中，你会遇到C#的基本语法结构，如变量声明、...
VB.NET入门实例教程是一套专为初学者设计的编程学习资源，它涵盖了VB.NET的基础概念、语法和实际应用。这门教程通过各种小程序实例，帮助学习者快速掌握VB.NET编程的核心技能。 VB.NET，全称Visual Basic .NET，是...
adams 入门与提高最推荐的书籍，有大量实例，适合初学者 。
本文将深入探讨这些"python 脚本实例 编程实例 入门实例"，帮助你理解Python的基本概念和常用操作。 1. **变量与数据类型** Python中的数据类型包括整型（int）、浮点型（float）、字符串（str）和布尔型（bool）...
李增刚的书 比较基础 也比较简单明了 对了解nastran卡片文件和格式有很大的帮助
ADAMS入门详解与实例
这个“C++Builder入门实例”是针对初学者的一个实践项目，旨在帮助那些对C++有兴趣但又缺乏实践经验的人快速上手。 首先，C++是一种强大的、通用的编程语言，它具有面向对象的特性，并且支持泛型编程。C++Builder...
在“使用Protege创建本体进行推理-入门实例”中，我们将探讨如何通过Protege 5.2构建一个简单的生物分类本体，并利用内置的HermiT推理机进行推理。 首先，我们需要理解本体的基本构成。在这个实例中，我们有两类...
ExtJS入门实例、包含各种详细代码，非常适合初学者学习
"C++编程入门实例100篇(含源码)"这个资源提供了丰富的实践机会，帮助学习者通过实际操作来加深对C++的理解。 C++的特点在于它的面向对象编程（OOP）特性，包括封装、继承和多态性。封装允许我们将数据和操作数据的...
在“WCF入门实例”中，我们通常会接触到以下几个核心概念： 1. **服务契约（Service Contract）**：定义了服务提供的操作，即服务能做什么。在C#中，我们通过定义接口并添加`[ServiceContract]`特性来创建服务契约...
ObjectARX是AutoDesk公司针对AutoCAD平台上的二次开发而推出的一个开发软件包，它提供了以C++为基础的面向对象的开发环境及应用程序接口，能真正快速的访问AutoCAD图形数据库。 与以往的 AutoCAD 二次开发工具 Auto...
本资料包“LabVIEW学习资料-入门实例软件源代码100例合集.zip”是专为初学者设计的学习资源，包含了100个不同的LabVIEW实例，涵盖了从基础到进阶的各种应用场景。这些实例将帮助用户快速掌握LabVIEW的基本操作和编程...
ISE 10.1 快速入门实例 ISE（Integrated Synthesis Environment）是一种综合电子设计自动化（EDA）工具，由Xilinx公司开发，主要用于数字电路设计和FPGA开发。下面是ISE 10.1快速入门实例中的知识点： 1. ISE 快速...
开关电源设计入门与实例解析是一本面向初学者和行业工程师的实用工具书，旨在通过基础知识的讲解和具体实例的分析，帮助读者掌握开关电源设计的核心技术。 首先，我们需要理解开关电源的基本工作原理。开关电源的...
TMS320C66x KeyStone架构多核DSP入门与实例精解.pdf牛金海
Python入门实例，针对基本概念字典列表，字符串处理以及文件处理等实例