如何用JavaScript创建资源图表

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

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

准备好您的编码工具，通过本指南结束时，您将能够创建自己基于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>部分。

<!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 src="https://cdn.anychart.com/releases/8.11.1/js/anychart-gantt.min.js"></script>
  <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-data-adapter.min.js"></script>
</head>
<body>
  <div id="container"></div>
  <script>
    // The place for the following chart’s code.
  </script>
</body>
</html>

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 chart
var chart=anychart.ganttResource();

// set the data for the chart
chart.data(treeData);

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

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

// draw the chart
chart.draw();

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

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

<!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 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 () {
      // 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");
          // create a resource gantt chart
          var chart=anychart.ganttResource();
          // set the data for the chart
          chart.data(treeData);
          // set the container 
          chart.container("container");
          // draw the chart
          chart.draw();
        }
      );
    });
  </script>
</body>
</html>

定制资源图表

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

配置行和列

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

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

// customize the rows
chart
  .rowSelectedFill("#D4DFE8")
  .rowHoverFill("#EAEFF3")
  .splitterPosition(230);

// set the row height
chart.defaultRowHeight(50);

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

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

// customize the column settings:
// get the data grid
var dataGrid=chart.dataGrid();
// set the fixed columns mode
dataGrid.fixedColumns(true);
// first column
dataGrid
  .column(0)
  .title("#")
  .width(30
  .labels({ hAlign: "center" });
// second column
dataGrid
  .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 labels
var periodLabels=chart.getTimeline().periods().labels();
// set the period labels
periodLabels
  .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;
  });

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

/准备echarts脚本文件

官网下载最新版本：https://echarts.apache.org/zh/download.html

开源库下载：https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js

//5.33改成最新版本的版本号就可以下载最新版本了

下载第三方水球库插件：https://github.com/ecomfe/echarts-liquidfill

打开软件新建一个页面添加一个容器组件用于绑定图表对象组件名称随便填写后面要用到

2.添加一个事件来加载图表脚本，我用的的页面加载时，也可以添加后台服务组件，通过后台服务组件事件：服务响应时来调用脚本可以很方便的绑定数据

3.添加刚才下载echarts脚本文件

添加第三方水球插件：

引入脚本

一个简单的例子

要创建液体填充图表，您需要有一个类型为'liquidFill'. 一个基本选项可能是：

option={ series: [{ type: 'liquidFill', data: [0.6] }] };

多波

很容易创建一个带有多个波浪的液体填充图表，或者表示多个数据，或者提高图表的视觉效果。

option={ series: [{ type: 'liquidFill', data: [0.6, 0.5, 0.4, 0.3]}]};

这将在 60%、50%、40% 和 30% 的位置创建一个带有波浪的图表。

颜色和不透明度

要为液体填充图表系列设置颜色，请设置color为颜色数组。要设置不透明度，请使用itemStyle.opacity和itemStyle.emphasis.opacity用于普通样式和悬停样式。

option={ series: [{ type: 'liquidFill', data: [0.5, 0.4, 0.3], color: ['red', '#0f0', 'rgb(0, 0, 255)'], itemStyle: { opacity: 0.6 }, emphasis: { itemStyle: { opacity: 0.9 } } }] };

您还可以通过以下方式设置单个数据项的颜色和不透明度：

option={ series: [{ type: 'liquidFill', data: [0.5, 0.4, { value: 0.3, itemStyle: { color: 'red', opacity: 0.6 }, emphasis: { itemStyle: { opacity: 0.9 } } }] }] };

静波

为了防止波浪向左或向右移动，您可以简单地设置waveAnimation为false。要禁用波浪上升的动画，请将animationDuration和设置animationDurationUpdate为 0。

option={ series: [{ type: 'liquidFill', waveAnimation: false, animationDuration: 0, animationDurationUpdate: 0, data: [0.6, 0.5, 0.4, 0.3] }] };

静止波

您可以将设置amplitude为 0 以产生静止波。

option={ series: [{ type: 'liquidFill', data: [0.6, 0.5, 0.4, 0.3], amplitude: 0, waveAnimation: 0 }] };

在这种情况下建议设置waveAnimation为 false 以禁用动画以考虑性能。

改变单个波

要更改单个波形，请覆盖数据项中的选项。

option={ series: [{ type: 'liquidFill', data: [0.6, { value: 0.5, direction: 'left', itemStyle: { color: 'red' } }, 0.4, 0.3] }] };

背景样式

您可以使用 backgroundStyle 选项来设置背景形状的笔触、填充样式。

option={ series: [{ type: 'liquidFill', data: [0.6, 0.5, 0.4, 0.3], backgroundStyle: { borderWidth: 5, borderColor: 'red', color: 'yellow' } }] };

轮廓样式

要隐藏轮廓，只需设置outline.show为false。

option={ series: [{ type: 'liquidFill', data: [0.6, 0.5, 0.4, 0.3], outline: { show: false } }] };

形状

水填充图表的形状。有可能：

//默认形状：'circle',圆形 'rect'正方形, 'roundRect'圆角正方形, 'triangle'三角形, 'diamond'菱形, 'pin'气球形, 'arrow'多边三角形;
'container'：完全填满容器的形状。
'path://'以.开头的 SVG 路径

options=[{ series: [{ type: 'liquidFill', data: [0.6, 0.5, 0.4, 0.3], shape: 'diamond' }] }];

option={
    series: [{
        type: 'liquidFill',
        data: [0.5, 0.4, 0.3, 0.2],
        shape: 'container',
        outline: {
            show: false
        }
    }]
};

option={ series: [{ type: 'liquidFill', data: [0.6, 0.55, 0.4, 0.25], radius: '60%', outline: { show: false }, backgroundStyle: { borderColor: '#156ACF', borderWidth: 1, shadowColor: 'rgba(0, 0, 0, 0.4)', shadowBlur: 20 }, shape: 'path://M367.855,428.202c-3.674-1.385-7.452-1.966-11.146-1.794c0.659-2.922,0.844-5.85,0.58-8.719 c-0.937-10.407-7.663-19.864-18.063-23.834c-10.697-4.043-22.298-1.168-29.902,6.403c3.015,0.026,6.074,0.594,9.035,1.728 c13.626,5.151,20.465,20.379,15.32,34.004c-1.905,5.02-5.177,9.115-9.22,12.05c-6.951,4.992-16.19,6.536-24.777,3.271 c-13.625-5.137-20.471-20.371-15.32-34.004c0.673-1.768,1.523-3.423,2.526-4.992h-0.014c0,0,0,0,0,0.014 c4.386-6.853,8.145-14.279,11.146-22.187c23.294-61.505-7.689-130.278-69.215-153.579c-61.532-23.293-130.279,7.69-153.579,69.202 c-6.371,16.785-8.679,34.097-7.426,50.901c0.026,0.554,0.079,1.121,0.132,1.688c4.973,57.107,41.767,109.148,98.945,130.793 c58.162,22.008,121.303,6.529,162.839-34.465c7.103-6.893,17.826-9.444,27.679-5.719c11.858,4.491,18.565,16.6,16.719,28.643 c4.438-3.126,8.033-7.564,10.117-13.045C389.751,449.992,382.411,433.709,367.855,428.202z', label: { position: ['38%', '40%'], formatter: function() { return 'ECharts\nLiquid Fill'; }, fontSize: 40, color: '#D94854' } }] };

动画

一般来说，液体填充图表中有两种类型的动画。
第一种是初始动画，具有升浪的效果。此动画的缓动方法由控制，animationEasing其持续时间由控制animationDuration。
第二种是更新动画，通常在数据变化、波高变化时使用。它们由animationEasingUpdate和控制animationDurationUpdate。
例如，要禁用提升动画并将更新动画时间设置为 2 秒cubicOut，可以使用以下选项：

var mytubiao=echarts.init(document.getElementById("mytb"))

option={
series: [{
type: 'liquidFill',
data: [0.6, 0.5, 0.4, 0.3],
animationDuration: 0,
animationDurationUpdate: 2000,
animationEasingUpdate: 'cubicOut'
}]
};
mytubiao.setOption(option);
setTimeout(function () {
mytubiao.setOption({
series: [{
type: 'liquidFill',
data: [0.8, 0.6, 0.4, 0.2]
}]
})
}, 3000);

更改文本

默认情况下，液体填充图表的文本标签显示第一个数据的百分比。例如，对于带有 data 的图表[0.6, 0.5, 0.4, 0.3]，默认文本是60%.

要更改文本，您可以使用label.formatter，它可以设置为字符串或函数。

如果是字符串，{a}则表示系列名称、{b}数据名称和{c}数据值。

option={ series: [{ type: 'liquidFill', name: 'Liquid Fill', data: [{ name: 'First Data', value: 0.6 }, 0.5, 0.4, 0.3], label: { formatter: '{a}\n{b}\nValue: {c}', fontSize: 28 } }] };
此示例的标签文本为'Liquid Fill\nFirst Data\nValue: 0.6'.

formatter这与作为函数使用的结果相同：

option={ series: [{ type: 'liquidFill', name: 'Liquid Fill', data: [{ name: 'First Data', value: 0.6 }, 0.5, 0.4, 0.3], label: { formatter: function(param) { return param.seriesName + '\n' + param.name + '\n' + 'Value:' + param.value; }, fontSize: 28 } }] };
文本位置默认在中心。label.position可以设置为'inside', 'left', 'right', 'top', 'bottom', 或水平和垂直位置，例如['10%', '20%']，表示'10%'向左（由控制label.align，可以是'left'、'center'或'right'）和'20%'顶部（由控制label.baseline，可以是'top'、'middle'或'bottom'）。
阴影
默认情况下，波浪和轮廓上有阴影。以下是如何更改它们。

option={ series: [{ type: 'liquidFill', data: [0.6, 0.5, 0.4, 0.3], itemStyle: { shadowBlur: 0 }, outline: { borderDistance: 0, itemStyle: { borderWidth: 5, borderColor: '#156ACF', shadowBlur: 20, shadowColor: 'rgba(255, 0, 0, 1)' } } }] };

工具提示

添加工具提示：
option={ series: [{ type: 'liquidFill', data: [0.6], name: 'Liquid Fill' }], tooltip: { show: true } };

点击事件

要在 wave 上添加点击事件：

chart.setOption(option); chart.on('click', function() { console.log(arguments); // do something useful here });

与任何其他图表类型一样，上述代码只会触发波事件。如果要跟踪整个画布或特定元素上的事件，可以将侦听器添加到 zrender，例如：

chart.getZr().on('click', function() { console.log(arguments); });

不可交互

要使元素（例如，波浪）不可交互，只需设置silent为true.

option={ series: [{ type: 'liquidFill', data: [0.6, 0.5, 0.4, 0.3], silent: true }] };

API

液体填充图表的默认选项是：

{

data: [],

color: ['#294D99', '#156ACF', '#1598ED', '#45BDFF'],

center: ['50%', '50%'],

radius: '50%',

amplitude: '8%',

waveLength: '80%',

phase: 'auto',

period: 'auto',

direction: 'right',

shape: 'circle',

waveAnimation: true,

animationEasing: 'linear',

animationEasingUpdate: 'linear',

animationDuration: 2000,

animationDurationUpdate: 1000,

outline: {

show: true,

borderDistance: 8,

itemStyle: {

color: 'none',

borderColor: '#294D99',

borderWidth: 8,

shadowBlur: 20,

shadowColor: 'rgba(0, 0, 0, 0.25)'

}

backgroundStyle: {

color: '#E3F7FF'

itemStyle: {

opacity: 0.95,

shadowBlur: 50,

shadowColor: 'rgba(0, 0, 0, 0.4)'

label: {

show: true,

color: '#294D99',

insideColor: '#fff',

fontSize: 50,

fontWeight: 'bold',

align: 'center',

baseline: 'middle'

position: 'inside'

emphasis: {

itemStyle: {

opacity: 0.8

}

数据{(数字|对象)[]}

每个数据项的值应介于 0 和 1 之间。

数据项也可以是配置单个项的选项的对象。

option={

series: [{

type: 'liquidFill',

data: [0.6, {

value: 0.5,

itemStyle: {

color: 'red'

}

}, 0.4, 0.3]

}]

};

这定义了具有第二波红色的图表。

颜色 {string[]}

波浪颜色。

形状 {字符串}

水填充图表的形状。它可以是默认符号之一：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'. 或者，以 . 开头的 SVG 路径'path://'。

中心{字符串[]}

图表的位置。第一个值是 x 位置，第二个值是 y 位置。每个值都可以是一个相对值，例如'50%'，它是相对于容器宽度和高度的较小值的，也可以是一个绝对值，例如100px。

半径 {字符串}

图表的半径，可以是相对值，如'50%'，相对于容器宽度和高度的较小值，也可以是绝对值，如100px。

幅度{数}

波的幅度，以像素或百分比为单位。如果它是百分比，它是相对于直径的。

波长 {字符串|数字}

波的波长，可以是相对值，例如'50%'，它是相对于直径的，也可以是绝对值，例如'100px'或100。

阶段{编号}

波的相位，以弧度表示。默认情况下'auto'，当每个波的相位Math.PI / 4大于前一个时，它被设置为。

周期 {number|'auto'|function}

向前移动一个波长所需的毫秒数。默认情况下，'auto'当前面的波速度较大时，它被设置为。

它也可以是格式化程序功能。

option={

series: [{

type: 'liquidFill',

data: [0.6, 0.5, 0.4, 0.3],

radius: '70%',

phase: 0,

period: function (value, index) {

// This function is called four times, each for a data item in series.

// `value` is 0.6, 0.5, 0.4, 0.3, and `index` is 0, 1, 2, 3.

return 2000 * index + 1000;

}

}]

}

方向 {字符串}

波浪移动的方向，应该是'right'或'left'。

waveAnimation {boolean}

是否启用向左或向右移动的波浪。

动画缓动 {字符串}

初始动画的缓动方法，当波浪从底部开始上升时。

animationEasingUpdate {字符串}

其他动画的缓动方法，例如，当数据值改变和波浪位置改变时。

动画持续时间 {数字}

初始动画持续时间，以毫秒为单位。

animationDurationUpdate {数字}

其他动画持续时间，以毫秒为单位。

大纲.show {布尔}

是否显示轮廓。

大纲.borderDistance {number}

边界和内圈之间的距离。

outline.itemStyle.borderColor {字符串}

边框颜色。

outline.itemStyle.borderWidth {number}

边框宽度。

outline.itemStyle.shadowBlur {number}

轮廓阴影模糊大小。

outline.itemStyle.shadowColor {字符串}

轮廓阴影颜色。

backgroundStyle.color {字符串}

背景填充颜色。

backgroundStyle.borderWidth {字符串}

背景描边线宽。

backgroundStyle.borderColor {字符串}

背景描边线宽。

backgroundStyle.itemStyle.shadowBlur {number}

背景阴影模糊大小。

backgroundStyle.itemStyle.shadowColor {字符串}

背景阴影颜色。

backgroundStyle.itemStyle.opacity {number}

背景不透明度。

itemStyle.opacity {number}

波浪不透明度。

itemStyle.shadowBlur {number}

波浪阴影宽度。

itemStyle.shadowColor {字符串}

波浪阴影颜色。

强调.itemStyle.opacity {number}

悬停时波浪不透明度。

标签.show {布尔}

是否显示标签文本。

label.color {字符串}

在背景上显示时文本的颜色。

label.insideColor {字符串}

在波形上显示时文本的颜色。

label.fontSize {数字}

标签字体大小。

标签.fontWeight {字符串}

标签字体粗细。

标签对齐{字符串}

文本对齐，应该是'left', 'center', 或'right'.

label.baseline {字符串}

文本垂直对齐，应为'top'、'middle'或'bottom'。

标签位置 {string|string[]}

文本位置默认在中心。label.position可以设置为'inside', 'left', 'right', 'top', 'bottom', 或水平和垂直位置，例如['10%', '20%']，表示'10%'左侧和'20%'顶部。

数据时代，收集和使用数据的需求正在爆发式增长，数据可视化也变得愈加重要。开发人员在想方设法将不同数据库中的记录整合到仪表板和漂亮的图表中，向人们快速直观地展示信息。

在过去十年中数据可视化技术不断改进，结果涌现了很多高水平的图表库。

21 世纪初期，人们使用服务端图像位图来生成图表。那时像 Silverlight 和 Flash 这样的插件提供了丰富的交互式图表体验，代价是减少电池寿命、拖慢下载速度并耗费更多系统资源。

移动设备兴起之后，移动平台不再支持插件并开始转向开放客户端技术，这些技术可以在任何平台上运行，成为了开发人员的首选。同时，触摸手势缩放和非常高分辨率的屏幕开始流行，使得无关分辨率的矢量图表广受欢迎。

随之而来的就是数据可视化的时代，SVG 可扩展矢量图像和 JavaScript 成为主角。今天的图表技术可支持所有浏览器平台，支持交互性和动画，并且不需要特殊的插件。这些图表在高分辨率设备中也有很好的显示效果。我们可以在 JS 开发中使用许多 JavaScript 图表库实现这些目标。

市面上有很多 JavaScript 图表库，本文则列出了其中的几款佼佼者，可以用在你的新项目中。

以下就是 2019 年的顶级 Javascript 图表库名单。

D3.js

D3.js 是一个图形 JavaScript 库，功能众多，十分强大。你可以用它对文档做数据驱动的转换，然后将任意数据绑定到 DOM 上。

D3 是非常优秀的图表库。它有一些较小的技术模块，如颜色、轴、轮廓、层次结构、多边形、缓动等。这也意味着你需要学习很多知识才能用好它，上手并不容易。

即使用它创建简单的图表也可能需要复杂的步骤。你需要明确定义包含图表项和轴在内的所有元素。它提供了一些示例，教你如何使用 CSS 来设置图表元素的样式。开发者无法自动应用基于图表的功能。

如果你想从零开始设计复杂的图表，完全按照自己的想法控制所有元素，那么这个库就是你的首选。但如果时间紧迫，从头开始解决数据可视化项目需求可能就不是什么好主意了。

作为图表库来说，D3.js 可以充当构建块。开发者可以用 D3 与 NVD3 一类的方案配合工作。这个图表库完全免费并开源。

Highcharts

Highcharts 是市面流行的 JavaScript 图表库之一，并被许多大公司采用。为了提供对 IE6 到 IE8 的兼容性，它先使用 SVG 然后转向 VML 来生成图表。它的示例图表带有一些很棒的功能，但看起来不怎么吸引人。它的文档里有很多 API 文档教程和相关主题。

它的 API 易于使用，开发者可以使用配置选项来开发图表。对于个人和非商业用途，Highcharts 可免费使用；证券行业等用途需要商业许可，而甘特图和地图图表则需要单独的许可证。

Chart.js

Chart.js 是一个开源 JavaScript 库，支持 8 种类型的图表。它只有 60kb，是一个非常小的 JS 库。它支持的图表类型包括雷达、内联图表、饼图、条形图、散点图、面积图、气泡和混合等。它还支持时间序列。在呈现层面，它使用 canvas 元素并能响应窗口大小调整缩放比率。它对 IE9 向后兼容。要兼容 IE7 的话也可以使用 Polyfills。

初次使用它的示例时还能看到现代感的初始动画。实时添加数据点或序列时有平滑的动画效果。你可以调用 update() 函数来修改图表选项并重绘图表。

在它的网站中没有展示示例源代码，但可以在 GitHub 仓库中找到。它的 API 简洁直观。用户使用配置选项来创建和修改图表。它的文档内容翔实，附带代码片段和属性 API 的教程。

这个库可免费用于商业和个人用途。它是开源项目。但对于更高级别的需求来说，它提供的图表类型可能有点少。

......

点击“了解更多”，查看全文

在线咨询

上一篇：怎样撰写学术论文的作者声明（附模板）
下一篇：vim 从嫌弃到依赖(22)-自动补全

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

如何用JavaScript创建资源图表

待创建的资源图表

构建资源图表

1. 创建一个HTML网页

2. 包含必要的JavaScript文件

3. 加载数据

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

定制资源图表

配置行和列

自定义资源图表 1

在条形图上添加最终比分

自定义资源图表 2

个性化视觉外观

自定义资源图表 3

自定义工具提示

一个简单的例子

多波

颜色和不透明度

静波

静止波

改变单个波

背景样式

轮廓样式

形状

动画

更改文本

工具提示

点击事件

D3.js

Highcharts

Chart.js

您的项目需求