提供3000多款全球软件/控件产品
针对软件研发的各个阶段提供专业培训与技术咨询
根据客户需求提供定制化的软件开发服务
全球知名设计软件,显著提升设计质量
打造以经营为中心,实现生产过程透明化管理
帮助企业合理产能分配,提高资源利用率
快速打造数字化生产线,实现全流程追溯
生产过程精准追溯,满足企业合规要求
以六西格玛为理论基础,实现产品质量全数字化管理
通过大屏电子看板,实现车间透明化管理
对设备进行全生命周期管理,提高设备综合利用率
实现设备数据的实时采集与监控
利用数字化技术提升油气勘探的效率和成功率
钻井计划优化、实时监控和风险评估
提供业务洞察与决策支持实现数据驱动决策
原创|使用教程|编辑:龚雪|2014-05-07 09:09:14.000|阅读 1370 次
概述:在本系列文章中,慧都小编将为大家详细介绍如何在PHP程序利用FusionCharts创建交互式JavaScript图表。我们将创建基础图表作为入门学习,然后层层深入,通过数据库创建带有向下钻取功能的高级图表。
# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>
相关链接:
绝大多数图表控件都可用于PHP应用程序,其中大部门是服务器端组件,无需任何交互即可生成图表和仪表的静态图像,而一些客户端图表组件则需要借助于JavaScript来生成交互式图表、仪表和网格。FusionCharts为PHP开发者提供了服务器端库,开发人员无需精通JavaScript也能在JavaScript中创建图表。FusionCharts提供的服务器端库有助于链接到数据源,生成图表数据以及所需的HTML和JavaScript代码。
在本系列文章中,慧都小编将为大家详细介绍如何在PHP程序利用FusionCharts创建交互式JavaScript图表。我们将创建基础图表作为入门学习,然后层层深入,通过数据库创建带有向下钻取功能的高级图表。
准备工作
1、在Web服务器根目录下,创建一个文件夹并命名为FusionCharts_XT_with_PHP,将其作为演示文件夹。
2、从 FusionCharts XT下载包复制整个Charts文件夹,并粘贴至演示文件夹。这样就完成了FusionCharts XT安装至web应用程序。
3、在FusionCharts XT Download Package > Code > PHP > Includes中将Includes文件夹复制到演示文件夹。
从静态XML创建图表
Data URL方法告诉FusionCharts从XML或JSON文件URL中加载数据。这个URL也可以指向一个虚拟数据提供商,如/path_to/data_provider.php。
在这个例子中,我们将FusionChartsXT指向XML文件的URL。在演示文件夹中创建一个空白的PHP文件夹,将其保存为FusionCharts_XT_Data_URL.php。包含FusionCharts.php库并创建一个简单的HTML页面,head标签中包括 FusionCharts.js。
在chartContainer的div中调用renderChart()方法。该方法可生成创建图表所需的所有HTML和JavaScript代码。我们将在container div中,编写所生成的代码。由于要在JavaScript中渲染图表,我们需要在选择之前指定该操作:
保存页面,并在页面中浏览也页面,JavaScript图表效果如下:
renderChart() 方法将按照下列顺序使用参数:
从XML字符串中创建图表
Data String方法中,XML或JSON 随着图表的HTML和JavaScript代码一起被嵌入到网页中。此方法不需要静态数据文件或虚拟数据提供者。然而,一旦图表数据完成加载,数据便会显示在页面中。
在demo文件夹内创建一个空白的PHP文件,并保存为FusionCharts_XT_Data_String.php。
接下来,我们将创建一个字符串变量以保存图表的XML数据。接下来,我们将使用到之前Data URL方法中所用到的同一个XML文件。复制文件内容,并将起粘贴为字符串变量的内容。
在div中再次调用renderChart() 方法。
保存页面,并在浏览器中进行浏览。你会发现图表效果和先前的JavaScript图表一样:
提供JSON数据
你可以在特定图表的 renderChart() 方法前,调用下列方法为图表提供JSON数据。
FC_SetDataFormat("json");
我们提供了一个可以从XML图表数据转换为JSON数据的工具。该工具位于FusionCharts Download Package > Tools > FCDataConverter。你可以 将以下代码粘贴到上述XML中并获取JSON图表数据:
{ "chart": { "caption": "Top 25 Multilingual Countries vs Their Population", "pyaxisname": "Languages Spoken", "syaxisname": "Population", "showvalues": "0", "useroundedges": "1", "palette": "3", "numvisibleplot": "5", "sformatnumberscale": "1", "linethickness": "5", "anchorradius": "5" }, "categories": [ { "category": [ { "label": "Canada" }, { "label": "China" }, { "label": "India" }, { "label": "United States" }, { "label": "Russian Federation" }, { "label": "Tanzania" }, { "label": "South Africa" }, { "label": "Congo, The Democratic Republic of the" }, { "label": "Kenya" }, { "label": "Mozambique" }, { "label": "Philippines" }, { "label": "Uganda" }, { "label": "Nigeria" }, { "label": "Iran" }, { "label": "Sudan" }, { "label": "Angola" }, { "label": "Vietnam" }, { "label": "Indonesia" }, { "label": "Czech Republic" }, { "label": "Austria" }, { "label": "Pakistan" }, { "label": "Myanmar" }, { "label": "Chad" }, { "label": "Sierra Leone" }, { "label": "Namibia" } ] } ], "dataset": [ { "seriesname": "Languages Spoken", "showvalues": "1", "data": [ { "value": "12" }, { "value": "12" }, { "value": "12" }, { "value": "12" }, { "value": "12" }, { "value": "11" }, { "value": "11" }, { "value": "10" }, { "value": "10" }, { "value": "10" }, { "value": "10" }, { "value": "10" }, { "value": "10" }, { "value": "10" }, { "value": "10" }, { "value": "9" }, { "value": "9" }, { "value": "9" }, { "value": "8" }, { "value": "8" }, { "value": "8" }, { "value": "8" }, { "value": "8" }, { "value": "8" }, { "value": "8" } ] }, { "seriesname": "Population", "parentyaxis": "S", "data": [ { "value": "31147000" }, { "value": "1277558000" }, { "value": "1013662000" }, { "value": "278357000" }, { "value": "146934000" }, { "value": "33517000" }, { "value": "40377000" }, { "value": "51654000" }, { "value": "30080000" }, { "value": "19680000" }, { "value": "75967000" }, { "value": "21778000" }, { "value": "111506000" }, { "value": "67702000" }, { "value": "29490000" }, { "value": "12878000" }, { "value": "79832000" }, { "value": "212107000" }, { "value": "10278100" }, { "value": "8091800" }, { "value": "156483000" }, { "value": "45611000" }, { "value": "7651000" }, { "value": "4854000" }, { "value": "1726000" } ] } ] }
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn
本文探讨 SQL Server 中 NULL 和空值之间的区别,并讨论如何有效地处理它们。
Unity 是一款功能极其丰富的游戏引擎,允许开发人员将各种媒体集成到他们的项目中。但是,它缺少最令人兴奋的功能之一 - 将 Web 内容(例如 HTML、CSS 和 JavaScript)直接渲染到 3D 场景中的纹理上的能力。在本文中,我们将介绍如何使用 DotNetBrowser 在 Unity3D 中将 Web 内容渲染为纹理。
DevExpress v24.2帮助文档正式发布上线了,请按版本按需下载~
本教程将向您展示如何用MyEclipse构建一个Web项目,欢迎下载最新版IDE体验!
服务电话
重庆/ 023-68661681
华东/ 13452821722
华南/ 18100878085
华北/ 17347785263
客户支持
技术支持咨询服务
服务热线:400-700-1020
邮箱:sales@pclwef.cn
关注我们
地址 : 重庆市九龙坡区火炬大道69号6幢