有四个步骤:

分区线和网格
numDivLines                画布内部水平分区线条数,数字
divLineColor                水平分区线颜色,6位16进制颜色值
divLineThickness            水平分区线厚度,[1-5]
divLineAlpha                水平分区线透明度,[0-100]
showAlternateHGridColor    是否在横向网格带交替的颜色,默认为0(False)
alternateHGridColor        横向网格带交替的颜色,6位16进制颜色值
alternateHGridAlpha        横向网格带的透明度,[0-100]
showDivLinues            是否显示Div行的值,默认??
numVDivLines                画布内部垂直分区线条数,数字
vDivLineColor                垂直分区线颜色,6位16进制颜色值
vDivLineThickness            垂直分区线厚度,[1-5]
vDivLineAlpha                垂直分区线透明度,[0-100]
showAlternateVGridColor    是否在纵向网格带交替的颜色,默认为0(False)
alternateVGridColor        纵向网格带交替的颜色,6位16进制颜色值
alternateVGridAlpha        纵向网格带的透明度,[0-100]

少数上述所列图表不标准FusionCharts
v3的包。例如,花键,对数,瀑布及拖放能够图表的一部分,
PowerCharts包,可单独购买..

值通过在标签上设置value =“…”属性。

不管有多少服务器端语言出现,没有谁能够取代PHP。至少是不久的将来都不可能。
PHP还有许多最著名的web应用程序的支柱。

FusionCharts v3新增功能

新的3.1版本:
使得出口能力为PDF格式的图表和图片在客户端以及服务器端
旋转文字并不需要任何更多的嵌入字体。任何UTF –
8字符现在可以旋转和使用图表从而FusionCharts真正多语言。
选项指定文本价值,可以代替数值是图表上显示的每个数据项
无法加载自定义标识,图表上在预先确定的位置,然后连结相同

FusionCharts v3新增功能 FusionCharts
v3的拥有大量的新功能,在以前的版本。下面是几个主要的。

有什么新的3.1版本:
使得出口能力为PDF格式的图表和图片在客户端以及服务器端
旋转文字并不需要任何更多的嵌入字体。任何UTF –
8字符现在可以旋转和使用图表从而FusionCharts真正多语言。
选项指定文本价值,可以代替数值是图表上显示的每个数据项
无法加载自定义标识,图表上在预先确定的位置,然后连结相同
选择添加自定义菜单项,以图表的上下文菜单,然后连结相同
支持包装的标题,分标题和工具
趋势线现在可以自定义工具文本
用户定义调色板的数据项目
更多的JavaScript事件,以帮助您更好的操纵图表从您的JavaScript代码
出口能力的数据,图表的CSV使用上下文菜单或JavaScript的API
能力得到了XML的任何使用JavaScript API的图表
能力得到了一张图表属性使用JavaScript的API
图表已重新在36fps解决内存问题在Firefox

新3.0 有什么?
新的图表类型
  FusionCharts v3的介绍了很多新的图表类型,如:

滚动图-柱二维,二维和区系的二维,堆叠柱二维,二维结合,结合二维(双年)
样图
样条区域图
对数坐标图
二维多图单Ÿ组合图。
二维多图双Ÿ组合图。此图被用来阴谋9类型的图表:
柱(小年) +线(中学年)组合
柱(小年) +地区(中学年)组合
柱(小年) +柱(中学年)组合
区(小年) +线(中学年)组合
区(小年) +柱(中学年)组合
区(小年) +地区(中学年)组合
线(小年) +线(中学年)组合
线(小年) +柱(中学年)组合
线(小年) +地区(中学年)组合
三维堆叠柱线双Ÿ组合图
三维单杠
三维堆叠式酒吧
先进的蜡烛棒图支持线,酒吧和数量列
拖放能够柱线图表先进的模拟情景
瀑布图

 少数上述所列图表不标准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破解版下载

 

请注意, PowerMaps是一项额外插入FusionCharts
v3的,而不是在标准许可。您需要另行购买。

如果指定的值是一个布尔值,那么它将被转换为一个JSON布尔值

如果你是一个后端开发人员,并且PHP是你技术堆栈的一部分,那么你会发现本教程非常有用。在这篇文章中,我将讲解如何一步一步使用PHP,FusionCharts的核心JavaScript图表库,以及它的PHP图表包装程序创建漂亮的图表。

折线图的参数
lineThickness                折线的厚度
anchorRadius                折线节点半径,数字
anchorBgAlpha                折线节点透明度,[0-100]
anchorBgColor                折线节点填充颜色,6位16进制颜色值
anchorBorderColor            折线节点边框颜色,6位16进制颜色值

 

生成的的的Json的有几种方式,他们之间的好处和坏处分别是什么?

下面就是我们今天要完成的目标图表

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

在客户导出方面而言,这指的是DOM的组成部分的FusionCharts的导出是在你的网页嵌入,随着图表同上。

1.背景介绍

图片 1

图表标题和轴名称
caption                    图表主标题
subCaption                    图表副标题
xAxisName                    横向坐标轴(x轴)名称
yAxisName                    纵向坐标轴(y轴)名称

 

6.扩展思考

步骤3:渲染图表

在渲染图表时,我们要定义HTML<div>元素。下面是做法:

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

要渲染图表,我们将调用render方法用于上面步骤中创建的图表对象。

$coolChart->render();

如果你正确地按照我上面提到的步骤去做,那么现在你应该已经创建好了一个图表。如果你在你的代码中发现任何错误,也可以参阅GitHub代码仓库以获得这个项目的全部源代码。

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

垂直分工之间的界线任何两个数据点。
在轴的图表,现在你可以选择垂直分工之间的界线任何两套数据。这特别有助于当你策划的数据说,
2岁,你想一个明显的分隔符之间两年的数据图表。

JSON是轻量级的文本数据交换格式

  • 步骤0:准备数据
  • 步骤1:引用JS和PHP文件
  • 步骤2:创建图表对象
  • 步骤3:渲染图表

数字格式
numberPrefix                增加数字前缀
numberSuffix                增加数字后缀    % 为 ‘%25’
formatNumberScale      
 是否格式化数字,默认为1(True),自动的给你的数字加上K(千)或M(百万);若取0,则不加K或M
decimalPrecision            指定小数位的位数,[0-10]    例如:=’0′
取整
divLineDecimalPrecision    指定水平分区线的值小数位的位数,[0-10]
limitsDecimalPrecision      
 指定y轴最大、最小值的小数位的位数,[0-10]
formatNumber              
 逗号来分隔数字(千位,百万位),默认为1(True);若取0,则不加分隔符
decimalSeparator            指定小数分隔符,默认为’.’
thousandSeparator            指定千分位分隔符,默认为’,’

一个Y轴中文例:

JSON 比 XML 更小、更快,更易解析。

步骤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>

图表和画布的样式
bgColor                    图表背景色,6位16进制颜色值
canvasBgColor                画布背景色,6位16进制颜色值
canvasBgAlpha                画布透明度,[0-100]
canvasBorderColor            画布边框颜色,6位16进制颜色值
canvasBorderThickness        画布边框厚度,[0-100]
shadowAlpha                投影透明度,[0-100]
showLegend                    是否显示系列名,默认为1(True)

 

5.编码实战

更多资源

在本教程中,我们在图表对象内直接传递JSON用于图表,但也有其他加载数据的方法。可以参考这个文档页面来了解其他加载数据的方法。

PHP和MySQL被认为是用于服务器端语言和数据库的最好结合之一,目前被许多流行的web应用程序使用。要了解更多有关于它们的用法,可以查看这篇有关如何使用PHP和来自于MySQL数据库数据创建drill-down图表的教程。

PS:欢迎提出有关于本教程的任何问题!

功能特性 animation                    是否动画显示数据,默认为1(True)
showNames                    是否显示横向坐标轴(x轴)标签名称
rotateNames                是否旋转显示标签,默认为0(False):横向显示
showValues                  
 是否在图表显示对应的数据值,默认为1(True)
yAxisMinValue                指定纵轴(y轴)最小值,数字
yAxisMaxValue                 指定纵轴(y轴)最大值,数字
showLimits                  
 是否显示图表限值(y轴最大、最小值),默认为1(True)

图片 2

感谢大家观看

步骤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:(布尔型)用于启用或禁用特定数据图(栏)的标签显示。

有很多可用的自定义选项可以根据你的具体使用情况使用。你可以查看这个庞大的图表属性列表来进行进一步探索。

Tool-tip/Hover标题
showhovercap                是否显示悬停说明框,默认为1(True)
hoverCapBgColor            悬停说明框背景色,6位16进制颜色值
hoverCapBorderColor        悬停说明框边框颜色,6位16进制颜色值
hoverCapSepChar            指定悬停说明框内值与值之间分隔符,默认为’,’

exportType=”PNG=Export as High Quality Image;JPG;PDF=Export as PDF File”

SON-taglib由3个用于定义数据的简单标签组成:JSON:object,JSON:property和JSON:array。

步骤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"}
]

我们将使用上述数据绘制条形图,并格式化我们的行为。对于其他图表类型,可能会有点复杂。

一些规模支持
FusionCharts v3的介绍了一些调整和更好地控制数字格式。

名称就是是一个字符串,可以在标签上设置name =“…”属性。

本文由码农网 –
小峰原创翻译,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划!

 

JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation)

客户端的导出
批量导出
服务器端导出使用’保存’的行动

如果该值是一个字符串,它将被转换为一个JSON字符串。

内置的Adobe Flash 8使用ActionScript 2的
FusionCharts v3是编码在Flash 8和ActionScript 2
,充分利用新的和先进功能的Flash
8喜欢动态渐变,过滤器,更好的速度,先进的面向对象的结构等

参考三:HTTP://www.runoob.com/json/json-tutorial.html

梯度支持
FusionCharts
v3的支持梯度大多数图表物件如背景下,油画,数据阴谋等诸多新的图表支持单一属性use3DLighting
,让先进的灯光和梯度影响图更好的视觉效果。

6.扩展思考

名称的JavaScript函数将被调用时返回进程的情况下导出成品:

任何其他用于设置值的的的的的Java类型都将调用的的的toString()方法,它们将被视为JSON字符串。

多种显示模式的数据标签
在FusionCharts
v3的,很多选择了介绍,以便更好地x轴Label控件。现在,您可以包装,错层或旋转X轴标签。

3.常见问题

exportFileName String
利用输出(导出)您可以指定此属性的名称(不包括扩展名)文件。      
导出对话框配置相关的属性: showExportDialog Boolean (0/1)
是否要显示在捕获阶段的出口对话框。如果没有,开始捕获过程,但没有图表对话框可见。
exportDialogMessage String 该消息被显示在对话框中。默认为“捕捉数据:”
exportDialogColor Hex Color 对话框背景颜色。 exportDialogBorderColor Hex
Color 对话框前景颜色。 exportDialogFontColor Hex Color
对话框文本的字体颜色。 exportDialogPBColor Hex Color
对话框进度条的颜色。

7.参考文献

Author

发表评论

电子邮件地址不会被公开。 必填项已用*标注