FusionCharts参数的详细说明和功能特性,PHP创建一个炫酷的图表【百家了乐八大技巧】

 百家乐-前端     |      2020-02-09 03:15

手续1:引用正视性

在此一步中,大家将包含FusionCharts的核心JavaScript库和PHP图表包装程序。

切实是这样产生的:

<? php
// including FusionCharts PHP wrapper
    include(path/to/fusioncharts.php);
?>

<head>
    <!-- FusionCharts core package files -->
    <script type="text/javascript" src="path/to/fusioncharts.js"></script>
</head>

FusionCharts v3新扩大效果与利益

新的3.1版本:
使得出口技能为PDF格式的图片和图片在顾客端以至劳动器端
旋转文字并没有必要任何更加多的放置字体。任何UTF - 8字符今后可以转动和选取图表进而FusionCharts真正多语言。
分选钦命文本价值,能够替代数值是图片上展现的各样数据项
没辙加载自定义标志,图表上在预先分明的职位,然后对接相仿
...
FusionCharts v3新添效果与利益 FusionCharts v3的具有大批量的新功用,在原先的本子。下边是多少个至关心注重要的。

有怎么样新的3.1本子:
使得出口技能为PDF格式的图形和图表在顾客端以致劳动器端
旋转文字并不须求任何越来越多的放松权利字体。任何UTF - 8字符今后能够转动和应用图表进而FusionCharts真正多语言。
慎选钦定文本价值,能够代表数值是图表上海展览中心示的各样数据项
不能够加载自定义标记,图表上在预先显明的岗位,然后对接相像
选用增添自定蒿子杆单项,以图纸的上下文菜单,然后对接相仿
扶助包装的标题,分题目和工具
大势线以后得以自定志愿者具文本
顾客定义调色板的数据项目
更加多的JavaScript事件,以协理您更加好的垄断(monopoly卡塔尔图表从你的JavaScript代码
言语工夫的数据,图表的CSV使用上下文菜单或JavaScript的API
技巧赢得了XML的其他利用JavaScript API的图样
力量赢得了一张图纸属性使用JavaScript的API
图表已重新在36fps缓慢解决内部存款和储蓄器难点在Firefox

新3.0 有什么?
新的图样类型
  FusionCharts v3的牵线了广大新的图形类型,如:

滚动图-柱二维,二维和区系的二维,聚成堆柱二维,二维结合,结合二维(双年)
样图
样条区域图
对数坐标图
二维多图单Ÿ组合图。
二维多图双Ÿ组合图。此图被用来阴谋9类型的图样:
柱(小年) +线(中学年)组合
柱(小年) +地区(中学年)组合
柱(小年) +柱(中学年)组合
区(小年) +线(中学年)组合
区(小年) +柱(中学年)组合
区(小年) +地区(中学年)组合
线(小年) +线(中学年)组合
线(小年) +柱(中学年)组合
线(小年) +地区(中学年)组合
三个维度堆放柱线双Ÿ组合图
三维单杠
三维堆成堆式迪厅
Red Banner的蜡烛棒图扶植线,舞厅和多少列
拖放能够柱线图表先进的依样画葫芦情景
瀑布图

 少数上述所列图表不标准FusionCharts v3的包。比方,花键,对数,瀑布及拖放可以图表的生机勃勃有个别, PowerCharts包,可单独购买..

出口手艺的图形图像
 从FusionCharts v3.0.5 ,以后您能够导出您的图形,图片相结合的顾客端和劳务器端操作。

轻便,但先进的构成与JavaScript
  FusionCharts v3的提供高等选项,将图纸与AJAX应用程序或JavaScript模块。您能够任何时候更新航海用图在顾客端,调用JavaScript函数的看好链接,或供给作出动态XML数据不关乎任何页面刷新。您也足以钦点一个DOMId的每一种图表和有注册的JavaScript 。图表能够维持JavaScript函数宣布了它的活动。

可视化的XML生成工具
  FusionCharts v3的介绍了一个新的Visual XML和图片生成工具,帮衬您轻巧地确立你的XML数据的图形。您能够手动输入数据的网格,造成XML或调换您现成的数据从原子钟格/ csv文件/表格到XML数据。

风尚元素
  FusionCharts v3的牵线方式,支持您适用的书体,效果和动漫,各样实体的图片。四个简易的样式贷款机制,利用这个你就能够轻便地操纵可视化布局图。

地图补助
  FusionCharts v3的介绍地图PowerMaps包。该PowerMaps Pack是访谈61基于Flash矢量地图用来显示不一致品种的多寡与地理分区。适用于网址和应用程序,每二个地形图揭示了其性质使用二个XML的API 。创建二个地形图使用大致供给几分钟,不关乎别的改善源代码。全部你要求做的是饲料中的数据的XML文件,您曾经思虑好。

请小心, PowerMaps是大器晚成项附加插入FusionCharts v3的,实际不是在规范予可。您供给再一次购买。

内置的Adobe Flash 8使用ActionScript 2的
  FusionCharts v3是编码在Flash 8和ActionScript 2 ,丰盛利用新的和进取成效的Flash 8心仪动态渐变,过滤器,越来越好的快慢,先进的面向对象的布局等

新的调节和测验形式
  FusionCharts v3的牵线了调节和测量试验格局为各类图表。在调节和测量试验方式能够援助你寻觅到正在发生着什么样图表幕后。你能够见见图片是何等开头化,获得的数量以致与 JavaScripts 。各样不当发生,也表明在这里。所以,当你看来三个荒唐的图片以后,你须求做的是切换来调节和测量检验形式,并明显了。

梯度扶持
  FusionCharts v3的援助梯度大繁多图纸物件如背景下,版画,数据阴谋等大多新的图形帮忙单少年老成属性use3DLighting ,让先进的灯的亮光和梯度影响图越来越好的视觉效果。

调色板帮忙
  FusionCharts v3的介绍调色板,以助手您飞速接纳颜色主题,为你的图片。从v3的,你能够选择之中贰个八年优先定义调色板改造的外观图。你不用钦赐别的十九进制颜色代码应用调色板。

虚线帮助
 从FusionCharts v3的,您能够利用虚线策划:

数据(列,线,馅饼等)
网格分区线
趋势线
笔直抽离线
你也能够钦点破折号品质像破折号长度,差异等

各样呈现形式的多寡标签
 在FusionCharts v3的,超级多选项了介绍,以便越来越好地x轴Label控件。以往,您能够打包,错层或旋转X轴标签。

旋转价值盒及动态地方选项
 的数据值的文件字段,现在能够旋转,以幸免轻巧。此外,在案件列图表,您能够筛选是不是将文本框的值列内或之外。若无空间, FusionCharts v3的会自行调度职分。

局地层面帮衬
  FusionCharts v3的介绍了有些调动和越来越好地决定数字格式。

自行分区线编码
  FusionCharts v3的介绍自动分区线编号和职位,以最棒的地点上的图样。

更加好的打字与印刷援救
 在上下文菜单中的图展将来包涵二个新类型“打字与印刷图表” ,它提供正规的跨浏览器的打字与印刷扶助。

越来越多的调节权动态调解
  v3的出产三种方式的图形大小- exactFit和noScale 。 noScale使用基于像素的尺寸。在exactFit格局,您能够调动图的底蕴上的百分比。其他, exactFit情势允许动态的调度,当容器对象(浏览器,表,分区等)调度大小。

先进的馅饼和甜甜圈图表
 馅饼和甜甜圈图表FusionCharts v3的提供先进的最终客商的竞相选拔像动态切丝,旋转,链接等别的,智能标签已被引进馅饼/甜甜圈图表。

越来越好的传说
  FusionCharts v3的介绍了五个越来越好的期待和相互故事的multi-series/combination图表。您能够自定义了成都百货上千的性质的遗闻每一个图表。

高等钻取功能
 图表项目今后得以链接到新窗口,弹出式,框架或本身窗口。

垂直分工之间的分野任何三个数分部。
 在轴的图纸,以后您能够筛选垂直分工之间的界线任何两套数据。那特别有扶助当您策划的数额说, 2岁,你想八个明白的分隔符之间三年的多少图表。

全方位图表作为一个抢手
  v3的带头,整个图表今后得以用作贰个十足的火热。

自定志愿者具提醒为每一种数据阴谋项目
 未来你能够设定您本身的工具提醒文字为每种数据阴谋项目。

多语言扶助的使用新闻
 将来,您能够轻巧定制的图样显示采撤销息(载入中图纸,装载数据,绘制图表等。 )在您自个儿的言语。要到位这点,你要求钦命的邮件图表来源和重新编写翻译。

相关文书档案:FusionCharts破解版下载

 

越多财富

在本教程中,我们在图片对象内一向传送JSON用于图表,但也会有任何加载数据的点子。能够参照以此文书档案页面来打听任何加载数据的艺术。

PHP和MySQL被以为是用来服务器端语言和数据库的最佳结合之意气风发,近日被众多盛行的web应用程序使用。要打听越多有关于它们的用法,能够查阅那篇关于什么选拔PHP和根源于MySQL数据库数据创制drill-down图表的学科。

PS:招待建议有关于本课程的任何难题!

图片标题和轴名称
caption                    图表主标题
subCaption                    图表副标题
xAxisName                    横向坐标轴(x轴卡塔尔名称
yAxisName                    纵向坐标轴(y轴State of Qatar名称

步骤2:成立图表对象

这一步大家要接收FusionCharts的PHP包装程序类为大家的图表 $coolChart 创建一个指标。创立图表对象的语法如下:

$objectName = new FusionCharts("chart type",
              "unique chart ID",
              "Chart Width",
              "Chart Height",
              "HTML Element for Chart",
              "Chart Data Format",
              "Data Source");

上面包车型大巴图形对象用于我们要在本教程中开创的图样:

$coolChart = new FusionCharts("bar2d", "myCoolPHPChart", "100%", "600",
               "barchart-container", "json",
               '{
                "chart": {
                    "caption": "Monthly revenue for Q4 - 2015",
                    "xAxisName": "Month",
                    //Other Chart Options
                },
                "data": [{
                    "label": "Oct",
                    "value": "490000"
                } //More Chart Data
            }');

上述语法中提到的“Data Source”满含多少个对象:

图片对象:蕴涵承当图表交互作用性和装潢的各样品质。它们中的一些证实如下:

  • showHoverEffect:(布尔型),用于启用或剥夺图表中的悬停效果。
  • plotFillHoverColor:(十四进制代码/颜色名称)用来定义鼠标悬停的曲线颜色。
  • plotFillHoverAlpha:(整型)用于定义悬停颜色的折射率。
  • baseFont:(字符串)用于定义图表的书体类型。
  • baseFontSize:(整型)用于安装图表的字体大小。
  • baseFontColor:(十三进制代码/颜色名称)用于安装图表的书体颜色。

数据对象:满含用于各种数据图的竹签和它们相应的值。能够被增多到数据对象内的别样性质是:

  • displayValue:(字符串)允许你为非常的数据图设置自定义的字符串值。
  • link:(字符串)允许你通过数据图链接到网页,drill-down图表或自定义的JavaScript函数来拿到更进一层的图纸作用。
  • showLabel:(布尔型)用于启用或剥夺特定数据图(栏)的竹签展现。

有那几个可用的自定义选项能够依靠你的现实性行使境况采取。你能够查阅那几个庞大的图样属性列表来进展进一层探究。

Set标签使用的参数
value                        数据值
color                        颜色
link                        链接(本窗口张开[Url],新窗口打开[n-Url],调用JS函数[JavaScript:函数])
name                        横向坐标轴标签字称

任由有稍许服务器端语言现身,未有什么人能够代表PHP。最少是及早的以往都不容许。 PHP还会有不菲最知名的web应用程序的支柱。

字体属性
baseFont                    图表字体样式
baseFontSize                图表字体大小
baseFontColor                图表字体颜色,6位16进制颜色值
outCnvBaseFont                图表画布以外的字体样式
outCnvBaseFontSize            图表画布以外的字体大小
outCnvBaseFontColor        图表画布以外的字体颜色,6位16进制颜色值

步骤0:准备数据

由于要求在计划对数据可视化从前,先准备好数据,所以自身叫这一步为步骤0,而非步骤-1。

FusionCharts既明白XML,也清楚JSON数据格式,然而在本教程中,大家只用JSON。我们将通过改变以下数据为FusionCharts认同的JSON键值来运行大家的科目。

月份 收入
Oct 490000
Nov 900000
Dec 730000

上边是上述数据的JSON表示:

[
    {"label": "Oct", "value": "490000"},
    {"label": "Nov", "value": "900000"},
    {"label": "Dec", "value": "730000"}
]

大家将应用上述数量绘制条形图,并格式化大家的一举一动。对于其余图表类型,大概会有一些复杂。

图表和画布的体裁
bgColor                    图表背景象,6位16进制颜色值
canvasBgColor                画布背景象,6位16进制颜色值
canvasBgAlpha                画布折射率,[0-100]
canvasBorderColor            画布边框颜色,6位16进制颜色值
canvasBorderThickness        画布边框厚度,[0-100]
shadowAlpha                投影发光度,[0-100]
showLegend                    是或不是出示体系名,默感觉1(True卡塔尔(قطر‎

手续3:渲染图表

在渲染图表时,大家要定义HTML<div>要素。下边是做法:

<body>
    <div id="barchart-container">Cool Chart on its way!</div>
</body>

要渲染图表,大家将调用render方法用于地点步骤中创建的图纸对象。

$coolChart->render();

假诺您不错地服从自个儿下面提到的步骤去做,那么今后您应该早已创设好了二个图片。倘让你在你的代码中窥见任何不当,也足以参谋GitHub代码客栈以获得那一个类型的大器晚成体源代码。

作用特色 animation                    是不是动漫呈现数据,默许为1(True卡塔尔(قطر‎
showNames                    是还是不是出示横向坐标轴(x轴卡塔尔标签字称
rotateNames                是不是旋转突显标签,默以为0(False卡塔尔:横向展现
showValues                    是不是在图片展现相应的数据值,默以为1(True卡塔尔(قطر‎
yAxisMinValue                内定纵轴(y轴卡塔尔国最小值,数字
yAxisMaxValue                 钦赐纵轴(y轴State of Qatar最大值,数字
showLimits                    是还是不是出示图表限值(y轴最大、最小值卡塔尔国,默以为1(TrueState of Qatar