如何用JavaScript创建资源图表(图表资源数据创建自定义)「javascript图表库」

文章目录 [+]

在当今数据驱动的世界中，数据可视化简化了复杂信息，赋予个人做出明智决策的能力。
其中一种特别有价值的图表类型是资源图表，它有助于高效的资源分配。
本教程将是您创建动态资源图表的必备指南，使用JavaScript。

资源图表是一种甘特图类型，用于可视化有关资源利用的数据，例如设备、员工等。
它提供了全面的概述，使得及时做出明智决策变得更加容易。
举个例子，在本教程中，我将以球场为单位代表2022年卡塔尔世界杯的赛程，让您可以追踪每场比赛的时间和地点。

准备好您的编码工具，通过本指南结束时，您将能够创建自己基于JavaScript的资源图表，并拥有一个有价值的工具，用于追踪您下一个喜爱的锦标赛、服务器状态、员工项目分配，或者其他类似的事物。

如何用JavaScript创建资源图表(图表资源数据创建自定义) 如何用JavaScript创建资源图表(图表资源数据创建自定义) 脚本文章

（图片来自网络侵删）

待创建的资源图表

您是否对我们即将创建的内容感到兴奋？继续阅读，您将学会如何创建一个JavaScript资源图表，就像下面展示的一样。

感到好奇吗？让我们一起开始这激动人心的旅程吧！

（图片来自网络侵删）

构建资源图表

资源图表乍一看可能会显得复杂，因为它使用水平条来表示时间段。
然而，我向您保证，一旦您掌握了它，就会发现它其实非常简单。
您可以通过以下四个基本步骤来构建这个图表：

创建一个HTML网页。
包含必要的JavaScript文件。
加载数据。
编写一些JS代码来可视化资源图表。

现在，让我们详细了解每个步骤。

1. 创建一个HTML网页

首先，创建一个基本的HTML页面，用于承载您的JavaScript资源图表。
在HTML文档的主体中，添加一个HTML块元素，比如<div>，它将作为您即将创建的图表的容器。
给它一个ID，在您后面创建图表时，将在JavaScript代码中引用它。
为了确保图表使用正确的位置，可以在<style>块中定义一些CSS规则。

下面是一个以这种方式创建的简单网页的示例。
我将<div>元素命名为“container”，并调整其高度和宽度，使图表占据整个屏幕。

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>JavaScript Resource Gantt Chart</title> <style type="text/css"> html, body, #container { width: 100%; height: 100%; margin: 0; padding: 0; } </style></head><body> <div id="container"></div></body></html>2. 包含必要的JavaScript文件

在数据可视化方面，JavaScript图表库是非常宝贵的工具。
关键是找到一个不仅满足您的需求，而且支持您寻找的特定图表类型的库。

在本教程中，我将使用AnyChart，这是一个长期存在的JavaScript图表库，支持资源图表，并提供全面的文档，而且它是免费的（除非您将其集成到商业应用程序中）。
如果您选择使用其他库，整个过程基本上是一样的。

您可以通过两种主要选项来包含所选库的必要JavaScript文件：下载它们并在本地使用，或者通过CDN（内容传送网络）直接链接到它们。
在本教程中，我将选择CDN的方式。
下面是在HTML页面的<head>部分链接所需脚本的示例。

图表的代码将位于HTML页面的<body>部分的<script>标签中。
或者，如果更适合您的项目结构，也可以将其放在<head>部分。

3. 加载数据

现在，让我们加载数据。
在本教程中，将可视化2022年FIFA世界杯的赛程。
数据以JSON格式在提供的GitHub gist上可用。

数据由一系列对象组成，每个对象代表一个球场。
您将在每个球场对象中找到其名称和城市等详细信息。
此外，还有一个名为“periods”的属性，其中包含在该球场举办的比赛列表。
每场比赛由两支参赛国家的名称和比赛结果表示。

为了正确地将这种类型的数据输入到资源图表中，可以使用anychart.data.loadJsonFile()方法。
下面是加载数据的代码片段：

anychart.data.loadJsonFile("https://gist.githubusercontent.com/awanshrestha/07b9144e8f2539cd192ef9a38f3ff8f5/raw/b4cfb7c27b48a0e92670a87b8f4b1607ca230a11/Fifa%2520World%2520Cup%25202022%2520Qatar%2520Stadium%2520Schedule.json");

4. 编写一些JS代码来可视化资源图表

数据加载完毕后，您现在可以继续，看看如何通过几行JavaScript代码转化为一个完全功能的资源图表。

首先，添加anychart.onDocumentReady()函数，它封装了确保您的代码仅在页面完全加载时执行的所有必要代码。

<script> anychart.onDocumentReady(function () { // The resource chart data and code will be in this section. });</script>

接下来，加载数据并创建一个数据树。

anychart.onDocumentReady(function () { // load the data anychart.data.loadJsonFile( "https://gist.githubusercontent.com/awanshrestha/07b9144e8f2539cd192ef9a38f3ff8f5/raw/b4cfb7c27b48a0e92670a87b8f4b1607ca230a11/Fifa%2520World%2520Cup%25202022%2520Qatar%2520Stadium%2520Schedule.json", function (data) { // create a data tree var treeData = anychart.data.tree(data, 'as-table’); } );});

然后，使用ganttResource()方法创建资源甘特图，并使用data()方法设置您的数据树。

// create a resource gantt chartvar chart = anychart.ganttResource();// set the data for the chartchart.data(treeData);

将图表放置在第1步中引入的<div>容器中，最后使用draw()方法绘制图表。

// set the container chart.container("container");// draw the chartchart.draw();

哇！
您已成功使用JavaScript创建了一个简单而完全功能的资源图表。
看看它在实际中是如何呈现的；这个图表的交互版本可以在这里找到。
为了您的方便，还提供了基本资源图表的完整代码。

有了这个资源图表，您可以轻松地可视化哪些比赛在哪些球场举行，您可以在右侧的比赛部分滚动查看所有比赛。
但还有更多内容可以探索，所以让我们继续定制这个交互式数据可视化。

现在基本的基于JavaScript的资源图表已经就绪，让我们探索一些增强其视觉效果和功能的方法。

配置行和列

为了提高资源图表的视觉吸引力，让我们深入一些可能的行和列的调整。

首先，您可以为行的选定和悬停状态设置自定义颜色，并调整分隔位置以获得更好的内容可见性。
此外，考虑指定默认行高，以便整洁地呈现和轻松阅读行项目。

// customize the rowschart .rowSelectedFill("#D4DFE8") .rowHoverFill("#EAEFF3") .splitterPosition(230);// set the row heightchart.defaultRowHeight(50);

现在，让我们继续配置列。
在第一列中，您可以选择将一个简单的数字标签“#”作为标题，并自定义其宽度。

对于第二列，您可以将球场名称设置为粗体，以突出显示，并将城市名称放在球场名称的正下方。
根据需要调整列宽，以舒适地容纳内容。

// customize the column settings:// get the data gridvar dataGrid = chart.dataGrid();// set the fixed columns modedataGrid.fixedColumns(true);// first columndataGrid .column(0) .title("#") .width(30 .labels({ hAlign: "center" });// second columndataGrid .column(1) .title("Stadium") .width(200) .labels() .useHtml(true) .format(function () { return ( "<strong>" + this.name.toString() + "</strong> <br>" + this.item.get("city") ); });自定义资源图表 1在条形图上添加最终比分

现在，让我们通过在时间轴条上直接显示比赛结果来增强资源图表。
这样可以快速查看比赛结果，而无需参考其他地方。

为了实现这一点，启用时间轴周期上的标签，并使用useHtml()方法应用自定义样式。

// configure the period labels:// get the period labelsvar periodLabels = chart.getTimeline().periods().labels();// set the period labelsperiodLabels .enabled(true) .useHtml(true) .format( "<span style='color:#fff; font-size: 12px;'>{%result}</span>" );

在资源条本身的额外信息的基础上，图表现在一目了然地提供了更丰富的信息。

自定义资源图表 2个性化视觉外观

为了获得美观的用户体验，考虑为图表的视觉方面增添一些调味。

首先，将图表的背景颜色设置为浅灰色。

chart.background("#edeae8 0.8");

接下来，从时间轴中作为元素访问条形，并对它们的填充和描边颜色进行调整。

var elements = chart.getTimeline().elements();elements.normal().fill("#9a1032 0.8");elements.normal().stroke("#212c68");

再进一步，可以使用函数根据条件动态填充条形的颜色。
例如，比赛结果可以是这样的一个条件。
因此，该函数检查比赛结果，如果是平局，则将条形涂成绿色；否则，涂成红色。
这提供了一种有趣的方式，可以通过条形的颜色立即辨别比赛的结果。

// 自定义条形的颜色：// 获取元素var elements = chart.getTimeline().elements();// 检查当前项目是否为平局，如果是，则以不同的颜色填充elements.normal().fill(function() { var result = this.period.result; var scores = result.split("-").map(Number); if (scores[0] === scores[1]) { return "#11A055 0.8"; } else { return "#9a1032 0.8"; }});elements.normal().stroke("#212c68");自定义资源图表 3自定义工具提示

现在，是时候微调工具提示，以提供更好的用户体验。

为了保持工具提示简洁明了，配置它在悬停在特定条形上时显示球队名称和比赛结果。

// 配置工具提示var tooltip = chart.getTimeline().tooltip();tooltip .useHtml(true) .format(function(e) { var tooltipText; if (typeof e.period === "undefined") { tooltipText = e.item.la.city; } else { var period = e.period; tooltipText = period.result; } return tooltipText; });

这些微小的调整显著提高了呈现数据的视觉清晰度。
现在，下面是资源图表的最终版本。
您可以在此处探索这个最终图表的交互版本。
随意探索并与之交互。
为了方便起见，下面提供了最终资源图表的完整代码。

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>JavaScript Resource Gantt Chart</title> <style type="text/css"> html, body, #container { width: 100%; height: 100%; margin: 0; padding: 0; } </style> <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-core.min.js"></script> <script data-fr-src="https://cdn.anychart.com/releases/8.11.1/js/anychart-gantt.min.js"></script> <script data-fr-src="https://cdn.anychart.com/releases/8.11.1/js/anychart-data-adapter.min.js"></script></head><body> <div id="container"></div> <script> anychart.onDocumentReady(function () { // 加载数据 anychart.data.loadJsonFile( "https://gist.githubusercontent.com/awanshrestha/07b9144e8f2539cd192ef9a38f3ff8f5/raw/b4cfb7c27b48a0e92670a87b8f4b1607ca230a11/Fifa%2520World%2520Cup%25202022%2520Qatar%2520Stadium%2520Schedule.json", function (data) { // 创建数据树 var treeData = anychart.data.tree(data, "as-table"); // 创建资源甘特图 var chart = anychart.ganttResource(); // 为图表设置数据 chart.data(treeData); // 自定义行 chart .rowSelectedFill("#D4DFE8") .rowHoverFill("#EAEFF3") .splitterPosition(230); // 设置行高 chart.defaultRowHeight(50); // 自定义列设置： // 获取数据网格 var dataGrid = chart.dataGrid(); // 第一列 dataGrid .column(0) .title("#") .width(30) .labels({ hAlign: "center" }); // 第二列 dataGrid .column(1) .title("Stadium") .width(200) .labels() .useHtml(true) .format(function () { return ( "<strong>" + this.name.toString() + "</strong> <br>" + this.item.get("city") ); }); // 配置周期标签： // 获取周期标签 var periodLabels = chart.getTimeline().periods().labels(); // 设置周期标签 periodLabels .enabled(true) .useHtml(true) .format( "<span style='color:#fff; font-size: 12px;'>{%result}</span>" ); // 配置图表的背景 chart.background("#edeae8 0.8"); // 自定义条形的颜色： // 获取元素 var elements = chart.getTimeline().elements(); // 检查当前项目是否为平局，如果是，则以不同的颜色填充 elements.normal().fill(function() { var result = this.period.result; var scores = result.split("-").map(Number); if (scores[0] === scores[1]) { return "#11A055 0.8"; } else { return "#9a1032 0.8"; } }); elements.normal().stroke("#212c68"); // 配置工具提示 var tooltip = chart.getTimeline().tooltip(); tooltip .useHtml(true) .format(function(e) { var tooltipText; if (typeof e.period === "undefined") { tooltipText = e.item.la.city; } else { var period = e.period; tooltipText = period.result; } return tooltipText; }); // 设置容器 chart.container("container"); // 绘制图表 chart.draw(); } ); }); </script></body></html>

标签：图表 34

如何用JavaScript创建资源图表(图表资源数据创建自定义)「javascript图表库」

相关文章

上海工商银行SWIFT代码金融科技助力跨境支付新篇章，上海工行swift code。

项目开发例子导航源代码构建高效项目开发体系的方法，项目开发路径图。

上古卷轴无限负重代码探寻游戏与现实的交织，上古卷轴无限负重代码。

上古卷轴吸血鬼病暗影中的诅咒之谜

上古卷轴技能提升的神秘代码，无尽潜力之旅

顺联动力股票代码背后的故事一家互联网新贵的崛起之路，顺联动力股票查询。

热门文章

标签列表