jQuery中的深入FusionCharts教程

可视化数据使其更易于阅读
在进行数据分析时, 大多数公司都依赖MS Excel或Google表格。尽管这些工具功能强大, 但很难注意到趋势, 更不用说从大量电子表格数据中了解任何信息了。处理以这种方式显示的数据并不是很有趣, 但是一旦向数据中添加了可视化, 事情就变得更易于管理, 而这就是今天的教程的主题-使用jQuery制作交互式图表。

文章图片
很难从电子表格数据行中注意到趋势, 但是一旦添加可视化…
鸣叫
我将在此项目中使用FusionCharts的JavaScript图表库, 因为它提供了90多个图表的大型库, 与每个浏览器兼容, 并且易于使用。它还提供了一个专用的jQuery插件, 使我们的工作更加轻松。
首先, 我将使用FusionCharts的核心JavaScript库及其jQuery图表插件制作基本图表, 然后向其中添加下钻功能。向下钻取允许你通过单击数据图从一个图表转到另一个图表。
术语” 数据图” 是上下文相关的；它指的是柱形图中的列, 折线图中的线, 饼图中的饼图。通过单击父图表中的数据图, 可以看到一个子图表, 该子图表显示了更深一层的相对数据。

文章图片
单击父图表上的数据图将弹出一个子图表。
了解FusionCharts
在开始本教程之前, 我们先介绍一下FusionCharts的基本结构。每个图表均由以下关键元素组成：

标题：图表上的标题。它说明了要绘制的内容。
子标题：标题下方的文本, 用于指定其他图表信息, 通常会指出收集数据的时间范围。
图例：这将为图表上的每个数据图显示一个符号。单击特定的图例图标可以启用或禁用特定图。
数据图：这些是图表上的数据表示。数据图可以是柱状图中的列, 折线图中的线或饼图中的饼图切片。
工具提示：将鼠标悬停在数据图上时显示的文本, 用于传达有关该特定数据图的其他信息。

文章图片
制作明细表
在开始之前, 这是我们将在本教程中制作的图表的屏幕截图。你可以在此处查看JSFiddle或在我的GitHub存储库上访问该项目的完整源代码。

文章图片
我已将制作明细表的过程分为五个步骤, 因此我们开始吧。
步骤1：包括JavaScript文件并创建图表容器
首先, 我们需要使用< script> 标记包含项目所依赖的所有JS文件。如果该页面尚不存在, 请创建一个空白的HTML文档, 并在< head> 部分中包含以下文件。现在我们需要以下四个文件：

精简版jQuery
FusionCharts的主要JS库(包括Fusioncharts.js和Fusioncharts.charts.js)
FusionCharts的jQuery插件

现在, 我们的< head> 部分将如下所示：

< !-- jQuery --> < script type="text/javascript" src="http://www.srcmini.com/jquery.min.js"> < /script> < !-- FusionCharts JS file --> < script type="text/javascript" src="http://www.srcmini.com/js/fusioncharts.js"> < /script> < script type="text/javascript" src="http://www.srcmini.com/js/fusioncharts.charts.js"> < /script> < !-- jQuery charts plugin --> < script type="text/javascript" src="http://www.srcmini.com/js/jquery-plugin.js"> < /script> < !-- custom theme file (optional) --> < script type="text/javascript" src="http://www.srcmini.com/js/srcmini.js"> < /script>

现在我们已经包含了所有依赖项, 是时候为图表创建容器< div> 并使用以下HTML代码将其嵌入到我们的页面中了：

< div id="drill-down-chart"> drill-down chart will load here< /div>

现在, 我们可以在代码中使用jQuery的$选择器来选择它：

$("#drill-down-chart")

注意：如果页面上有多个图表, 则每个图表都需要一个具有唯一ID的单独容器。

文章图片
步骤2：获取和构建数据
FusionCharts接受JSON和XML格式的数据, 但我选择使用JSON, 因为它已成为跨Web应用程序交换数据的标准格式。基本图表的JSON数据数组包含每个数据图的对象, 并且在每个数据图对象内定义其各自的标签和值。该结构如下所示：

"data": [{ "label": "Q1", "value": "850000", }, { "label": "Q2", "value": "2070000", }, ... // more data objects ]

当我们绘制深入图表时, 其JSON变得更加复杂。父图和子图之间的链接需要在数据数组的每个对象内再有一个键/值对。新键(毫不奇怪, 称为链接)将包含子图表的ID, 该子图表将在你单击其父数据图时获得。定义子图表ID的格式为newchart-dataFormat-childId。由于我们使用的是JSON, 因此我们知道链接的任何内容都将类似于newchart-json-childId。这是我们为图表定义的方式：

"data": [{ "label": "Q1", "value": "850000", "link": "newchart-json-q1" }, { "label": "Q2", "value": "2070000", "link": "newchart-json-q2" }, ... // more data objects]

步骤3：插入图表数据
数据准备就绪后, 就该使用jQuery插件提供的insertFusionCharts方法将图表插入页面中了：

$("#drill-down-chart").insertFusionCharts({ type: 'column2d', id: "mychart", width: '100%', height: '450', dataFormat: 'json', dataSource: { "chart": { "caption": "Quarterly Revenue for 2015", "paletteColors": "#9EA5FC", "xAxisName": "Quarter (Click to drill down)", "yAxisName": "Revenue (In USD)", // more chart configuration options }, "data": [ // see step-2 for explanation ], "linkedData": [ // explained in step-4 ] } })

让我们分解上面的代码片段：

type定义了我们要绘制的父图表的类型。在这种情况下, 请输入column2d。 FusionCharts库中的每个图表都有一个唯一的别名。你可以在FusionCharts的图表列表页面上找到要绘制的图表的别名。
id设置图表的唯一ID, 请勿与包含我们图表的< div> 元素的ID混淆。图表的ID用于选择要应用事件处理程序和调用方法的图表。我们将在步骤5中使用它。
宽度和高度以像素或百分比为单位设置图表的尺寸。 100％宽度告诉图表占据整个容器宽度。
我们使用dataFormat属性定义数据格式。我们在示例中使用JSON, 但是还有其他可接受的数据格式, 例如XML URL。要了解有关数据格式的更多信息, 请参阅FusionCharts的官方文档页面。
dataSource包含图表的实际内容, 其中的图表对象包含图表的配置选项, 例如标题和子标题。数据数组应该看起来很熟悉, 因为我们是在步骤2中完成的(它包含要绘制的数据), linkedData包含子图表的内容(单击父图表上的数据图表后得到的图表)。

相关：雇用自由职业大数据架构师的前3％。
步骤4：为子图表创建链接数据数组
现在我们已经定义了父图表, 是时候为每个数据图创建一个子图表了, 该过程与创建父图表非常相似。在” insertFusionCharts” 方法中创建的linkedData数组将为每个子图表定义一个单独的对象。第一个子图表的数据如下所示：

"linkeddata": [{ "id": "q1", "linkedchart": { "chart": { "caption": "Monthly Revenue", "subcaption": "First Quarter", "paletteColors": "#EEDA54, #A2A5FC, #41CBE3", "labelFontSize": "16", // more configuration options }, "data": [{ "label": "Jan", "value": "255000" }, { "label": "Feb", "value": "467500" }, //more data] } }, //content for more child charts

id是我们在步骤2中定义的单个子图表的ID。linkedChart与步骤3中的dataSource相似, 因为它包含该图表的实际内容。图表对象中还有许多其他属性, 我将在下一节” 使用图表属性改进设计” 中详细介绍。
步骤5：自定义向下钻取配置
多种图表类型到目前为止, 我们的示例代码使父图表和子图表共享相同的图表类型。如果要向下钻取到其他图表类型(例如, 从列到饼图), 请通过绑定fusionchartsrendered事件来完成。

$('#drill-down-chart').bind('fusionchartsrendered', function(event, args) { FusionCharts.items['mychart'].configureLink({ type: "doughnut2d", overlayButton: { message: 'BACK', // Set the button to show diff message bgColor: '#FCFDFD', borderColor: '#cccccc' } }); });

在上面的代码中, fusionchartsrendered事件将调用configureLink方法, 该方法定义所有子图表的类型以及任何叠加按钮选项。你还可以为每个子图表指定单独的图表类型。 configureLink方法中有很多可用的选项, 因此你可能会发现从FusionCharts中查看其API参考文档很有用。
不同div中的渲染图你可以做的另一件很酷的事情是将子图表呈现在不同的容器中, 而不是与其父容器相同的容器中。为此, 请在父图表容器之后定义一个单独的HTML < div> 容器, 并将其ID传递给renderAt属性, 如下所示：

$('#chart-container').bind('fusionchartsrendered', function(event, args) { FusionCharts.items['mychart'].configureLink({ type: "doughnut2d", renderAt:"chart-container2", overlayButton: { message: 'BACK', // Set the button to show diff messafe bgColor: '#FCFDFD', borderColor: '#cccccc' } }); });

赋予renderAt属性的值指定子图表将在其中呈现的< div> 的ID(chart-container2)。
使用图表属性改善设计
在学习完本教程后, 你将获得功能图表, 但如果按原样进行操作, 则可能会有些丑陋。要进行更具吸引力的演示, 你需要使用化妆品的” 图表属性” 。图表属性在图表对象内部定义, 并用于自定义渲染选项。在查看以下关键可配置属性时, 你可能会发现参考FusionCharts说明图很有用：

PaletteColors定义数据图的颜色。如果你在此处提供单一颜色, 则所有列均为该颜色。如果你提供多种颜色, 则第一列将采用第一个值, 第二列将采用第二个值, 依此类推。
plotSpacePercent控制列之间的空间。缺省值为20(值是整数, 但单位是百分比), 允许范围是0-80。零值将使列聚拢并彼此粘在一起。
baseFont定义图表的字体系列。你可以使用任何喜欢的字体。我在图表中使用了Google的Open Sans。只需在HTML页面中包含外部字体文件, 即可在图表中使用它。
plotToolText使你可以自定义工具提示。通过使用$ label和* $ dataValue等宏, 你可以从< div> 内部显示有关特定数据图的特定信息, 然后使用内联CSS设置< div> 的样式。这是我在示例中所做的：

"plotToolText": "< div style='font-size: 16px; text-align: center; '> $label: $dataValue< /div> "

主题允许你在其他文件中定义图表属性并在此处应用一次, 而不会使图表对象杂乱无章。你可以在项目的GitHub存储库的JS文件夹中找到本教程的主题文件-srcmini.js-。

这就是我要介绍的全部内容, 但是图表有一百多个属性, 因此, 如果你想进一步探索, 请访问FusionCharts的图表属性页面并搜索你的特定图表类型。
更多FusionCharts和jQuery资源尽管我已经介绍了使用jQuery创建向下钻取图表时最重要的元素, 但是当你尝试自己做时, 很有可能需要一些帮助。目前, 这里有一些其他资源：

jQuery图表插件：为获得启发, 请访问官方jQuery图表插件页面以查看一些实时示例。
说明文件：如果你无法找出答案, 则应该首先查看文件。这是jQuery插件和追溯图表(也称为链接图表)的便捷链接。
演示：每个图表库均提供实时样本以展示其功能, 而FusionCharts也不例外。如果需要一些想法, 请访问其演示库, 其中包含800多个实时示例, 并提供完整的源代码。你尝试制作的东西很有可能已经存在。无需从头开始；只是拨弄小提琴, 然后从那里开始！
更多扩展：如果你不使用原始JavaScript或jQuery, 则可以在此页面上浏览FusionCharts提供的更多插件和包装。它们具有适用于各种库和框架的专用插件, 例如Angular, React, Java, ASP.NET等。

PS：我将在下面的评论部分中闲逛, 因此随时发布你可能对我的文章提出的任何问题。我很乐意为你服务！
【jQuery中的深入FusionCharts教程】相关：用于预测性社交网络分析的数据挖掘