jQuery 中下钻 FusionCharts 教程

已发表: 2022-03-11

可视化数据使其更易于阅读

在处理数据分析时，大多数公司依赖 MS Excel 或 Google Sheets。虽然这些是强大的工具，但很难注意到趋势，更不用说从大行电子表格数据中获得任何意义了。处理以这种方式呈现的数据并不是很有趣，但是一旦你为这些数据添加了可视化，事情就会变得更容易管理，这就是今天教程的主题——使用 jQuery 制作交互式图表。

很难从电子表格数据行中注意到趋势，但是一旦添加了可视化...

鸣叫

我将在这个项目中使用 FusionCharts 的 JavaScript 图表库，因为它提供了一个包含 90 多个图表的大型库，与所有浏览器兼容，并且非常易于使用。它还为 jQuery 提供了一个专用插件，这将使我们的工作更轻松。

我将首先使用 FusionCharts 的核心 JavaScript 库及其 jQuery 图表插件制作一个基本图表，然后我将添加向下钻取功能。向下钻取允许您通过单击数据图从一个图表转到另一个图表。

术语“数据图”是上下文相关的；它指的是柱形图中的列，折线图中的线条，饼图中的饼片。通过单击父图表中的数据图，您会看到一个子图表，显示更深一层的相关数据。

单击父图表上的数据图将显示一个子图表。

了解 FusionCharts

在开始本教程之前，让我们先了解一下 FusionCharts 的基本结构。每个图表都由以下关键元素组成：

Caption：图表上的标题。它解释了正在绘制的图表。
子标题：标题下方的文本指定附加图表信息，通常它说明收集数据的时间范围。
图例：这将为图表上的每个数据图显示一个符号。可以通过单击其各自的图例图标来启用或禁用特定的图。
数据图：这些是图表上的数据表示。数据图可以是柱形图中的列、折线图中的线或饼图中的饼图。
工具提示：当您将鼠标悬停在数据图上时出现的文本，用于传达有关该特定数据图的其他信息。

制作下钻图

在开始之前，这是我们将在本教程中制作的图表的屏幕截图。您可以在此处查看 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="jquery.min.js"></script> <!-- FusionCharts JS file --> <script type="text/javascript" src="js/fusioncharts.js"></script> <script type="text/javascript" src="js/fusioncharts.charts.js"></script> <!-- jQuery charts plugin --> <script type="text/javascript" src="js/jquery-plugin.js"></script> <!-- custom theme file (optional) --> <script type="text/javascript" src="js/toptal.js"></script>

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

 <div>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 变得更加复杂。父图表和子图表之间的链接需要在数据数组的每个对象内多一个key value 。新键（不出所料，称为link ）将包含子图表的 id，当单击其父数据图时，您将获得该 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 步中使用它。
width和height以像素或百分比为单位设置图表的尺寸。 100% 宽度告诉图表占据整个容器宽度。
我们使用dataFormat属性定义数据格式。我们在示例中使用 JSON，但也有其他可接受的数据格式，例如 XML URL。想了解更多关于数据格式的信息，请参考 FusionCharts 的官方文档页面。
dataSource包含图表的实际内容，其中的chart对象包含图表的配置选项，例如标题和子标题。 data数组应该看起来很熟悉，因为我们在第 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 中定义的单个子图表的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 )。

使用图表属性改进设计

按照本教程，您将获得一个功能图表，但如果您将其保留在那里，它会有些难看。要获得更吸引人的演示文稿，您需要使用装饰性的“图表属性”。图表属性在chart对象内部定义并用于自定义呈现选项。在查看这些关键的可配置属性时，您可能会发现参考 FusionCharts 说明图很有用：

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

 "plotToolText": "<div>$label: $dataValue</div>"

theme允许您在不同的文件中定义图表属性并在此处应用一次，而不是将图表对象与众多图表属性混淆。您可以在项目的 GitHub 存储库的 JS 文件夹中找到本教程的主题文件 - toptal.js 。

这就是我要介绍的全部内容，但是图表有一百多个属性，所以如果您想进一步探索，请访问 FusionCharts 的图表属性页面并搜索您的特定图表类型。