跨平台图表控件Anychart教程：建立JavaScript雷达图-控件新闻-慧都网

跨平台图表控件Anychart教程：建立JavaScript雷达图

翻译|使用教程|编辑：杨鹏连|2020-07-08 15:13:32.417|阅读 386 次

概述：在本教程中，我将教您如何使用JavaScript构建自己的雷达图，以及如何使用它们来帮助您完成游戏历史上最艰难的决定之一：选择哪个开始的神奇宝贝！

相关链接：

AnyChart是基于JavaScript (HTML5) 的图表控件。使用AnyChart控件，可创建跨浏览器和跨平台的交互式图表和仪表。AnyChart 图表目前已被很多知名大公司所使用，可用于仪表盘、报表、数据分析、统计学、金融等领域。

点击下载AnyChart正式版

教程介绍如何在JavaScript HTML5中创建和编码交互式雷达图雷达图（也称为蜘蛛图或雷达图）是一种数据可视化，用于比较具有多个定量变量的观测值。每个变量编码为等距分开的辐条。值越高，指向图表的中心越远。雷达图最适合用来比较观测的“轮廓”并检测数据中的异常值。因此，它们在体育运动中被大量使用，最显着的是在篮球和足球中用于对运动员进行剖析。

没错，我们将构建雷达图以对Bulbasaur，Charmander和Squirtle进行数据分析，从而一劳永逸地确定这是最佳选择。

建立JavaScript雷达图

为了建立雷达图，我们将使用一个图表库。图表库消除了构建图表的许多负担（与d3.js之类的相比），使您可以快速轻松地获取图表。在本教程中，我选择使用AnyChart JavaScript库。我之所以选择AnyChart，是因为使用它构建图表非常快，并且由于文档非常密集，它对于初学者来说是一个了不起的库。

步骤1：设定页面

创建雷达图的第一步是设置html页面并加载所需的脚本。

<html>
  <head>
    <script src="//cdn.anychart.com/releases/8.7.1/js/anychart-core.min.js"></script>
    <script src="//cdn.anychart.com/releases/8.7.1/js/anychart-radar.min.js"></script>
    <style type="text/css">
      html, body, #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      anychart.onDocumentReady(function () {
        // drawing our chart goes here
      });
    </script>
  </body>
</html>

我在这里所做的全部工作是创建一个新的html页面，添加了创建雷达图anychart-core.min.js 和anychart- radar.min.js所需的脚本。前者是所有AnyChart图表所必需的，并带有基本图表（散点图，条形图等），而后者为我们提供了构建雷达图所需的模块。

然后，我们为html页面创建一个CSS规则，该规则设置图表的大小。我们已经使用了100％的宽度和高度以及0的边距来创建全屏数据，但是如果您希望进行其他操作，请将这些值更改为更适合您的需求。

最后，我们使用anychart.onDocumentReady()。我们的图表将进入此功能。它的作用是仅在文档准备就绪时才触发该功能。

步骤2：载入资料

为了为我们的首发口袋妖怪绘制雷达图，我们需要获取数据。我在bulbapedia.bulbagarden.net上找到了它，它似乎具有每一个神奇宝贝的统计数据！

éæç¨åå»ºçJSé·è¾¾å¾æ°æ®åºå¿«ç§

然后，我们需要将此数据重新格式化为AnyChart知道如何读取的内容。AnyChart喜欢以下格式的每个观测数据：

var data1 = [
  {x: "HP", value: 39},
  {x: "Attack", value: 52},
  {x: "Defense", value: 43},
  {x: "Special Attack", value: 60},
  {x: "Special Defense", value: 50},
  {x: "Speed", value: 65},
];

对象数组，每个变量的x轴变量名为“ x”，y轴变量名为“ value”。在雷达图的情况下，x轴变量是变量的名称，而y轴变量是值。

我们对每个入门级口袋妖怪重复此步骤，得到以下三个数组：

var data1 = [
  {x: "HP", value: 39},
  {x: "Attack", value: 52},
  {x: "Defense", value: 43},
  {x: "Special Attack", value: 60},
  {x: "Special Defense", value: 50},
  {x: "Speed", value: 65},
];
 
var data2 = [
  {x: "HP", value: 45},
  {x: "Attack", value: 49},
  {x: "Defense", value: 49},
  {x: "Special Attack", value: 65},
  {x: "Special Defense", value: 65},
  {x: "Speed", value: 45},
]; 
 
var data3 = [
  {x: "HP", value: 44},
  {x: "Attack", value: 48},
  {x: "Defense", value: 65},
  {x: "Special Attack", value: 50},
  {x: "Special Defense", value: 64},
  {x: "Speed", value: 43},
];

步骤3：绘制图表

现在我们已经连续排好所有（伪装）鸭子，是时候绘制图表了。

// create radar chart
var chart = anychart.radar();

// set chart title
chart.title("Starter Pokemon Comparison Chart");

// set chart yScale settings
chart.yScale()
  .minimum(0)
  .maximum(100)
  .ticks({'interval':20});

// create first series
chart.line(data1)
// create second series
chart.line(data2)
// create third series
chart.line(data3)

// set container id for the chart
chart.container('container');
// initiate chart drawing
chart.draw();

结果是：

这看起来不太有用吗？不同的系列看起来都一样。我们可以轻松解决此问题。如果我们更改最小和最大yScale值，我们将能够更好地看到3个系列之间的差异。然后，将最大值设置为65，将最小值设置为35，然后根据要尝试可视化的数据选择这些值。如果我们其中一个口袋妖怪的变量值大于65或小于35，我会选择其他值来适应该变量。

// set chart yScale settings
chart.yScale()
  .minimum(35)
  .maximum(65)
  .ticks({'interval':5});

<html>
  <head>
    <script src="//cdn.anychart.com/releases/8.7.1/js/anychart-core.min.js"></script>
    <script src="//cdn.anychart.com/releases/8.7.1/js/anychart-radar.min.js"></script>
    <style type="text/css">
      html, body, #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
  </body>
  <script>
    anychart.onDocumentReady(function () {
    // our data from bulbapedia
      var data1 = [
        {x: "HP", value: 39},
        {x: "Attack", value: 52},
        {x: "Defense", value: 43},
        {x: "Special Attack", value: 60},
        {x: "Special Defense", value: 50},
        {x: "Speed", value: 65},
      ];

      var data2 = [
        {x: "HP", value: 45},
        {x: "Attack", value: 49},
        {x: "Defense", value: 49},
        {x: "Special Attack", value: 65},
        {x: "Special Defense", value: 65},
        {x: "Speed", value: 45},
      ];  

      var data3 = [
        {x: "HP", value: 44},
        {x: "Attack", value: 48},
        {x: "Defense", value: 65},
        {x: "Special Attack", value: 50},
        {x: "Special Defense", value: 64},
        {x: "Speed", value: 43},
      ];  

      // create radar chart
      var chart = anychart.radar();
      // set chart yScale settings
      chart.yScale()
        .minimum(35)
        .maximum(65)
        .ticks({'interval':5});

      // create first series
      chart.line(data1)
      // create second series
      chart.line(data2)
      // create third series
      chart.line(data3)

      // set chart title
      chart.title("Starter Pokemon Comparison Chart");

      // set container id for the chart
      chart.container('container');
      // initiate chart drawing
      chart.draw();

    });
  </script>
</html>

现在我们可以区分我们的系列。

步骤4：自定义图表

正如我上面显示的那样，通过更改图表的某个方面，我使其更具吸引力和信息量。作为数据可视化开发人员，您的工作是使用所有可用的工具来帮助您更好地讲述数据故事。

任何值得其关注的制图库都可以自定义其图表，以使您更好地讲述自己的故事。现在，我将介绍一些自定义技术，以从雷达图中获取更多信息。
电池颜色

使用雷达图的缺点之一是很难比较不同变量之间的值（因为它们是循环定位而不是线性定位）。通过为交替的单元格着色以创建引用以更好地比较变量，我们可以在某种程度上减轻此缺点。

// color alternating cells
chart.yGrid().palette(["gray 0.1", "gray 0.2"]);

该代码将雷达单元变成灰色，而交替的单元具有不同的不透明度*。

*使用不透明度是众所周知的技巧，可以使不同的颜色完美搭配。

面积，填充，描边和图例

为了更好地描述我们的不同系列，我将系列类型从线条更改为区域。这将使我们能够更改多边形的填充。我还将更改每个系列的颜色，以更好地表示所讨论的神奇宝贝。

// create first series
chart.area(data1).name('Charmander').markers(true).fill("#E55934", 0.3).stroke("#E55934")
// create second series
chart.area(data2).name('Bulbasaur').markers(true).fill("#9BC53D", 0.3).stroke("#9BC53D")
// create third series
chart.area(data3).name('Squirtle').markers(true).fill("#5BC0EB", 0.3).stroke("#5BC0EB")

一个传说也可以让我们分辨出哪个系列。

// set chart title
chart.title("Starter Pokemon Comparison Chart");
  // set legend
  .legend(true);

重新排列变量

雷达图的另一个问题是用户倾向于看到相邻变量之间的联系，而事实并非如此。不幸的是，这还不能做很多事情，但是我们可以尝试充分利用它并重新排列变量，以使更相关的变量彼此相邻。这将进一步加强雷达图的使用，以查看分析性“概况”。

在我们的示例中，我们将重新排列以下内容：

var data1 = [
  {x: "HP", value: 39},
  {x: "Attack", value: 52},
  {x: "Defense", value: 43},
  {x: "Special Attack", value: 60},
  {x: "Special Defense", value: 50},
  {x: "Speed", value: 65},
];

对此

var data1 = [
  {x: "Speed", value: 65},
  {x: "HP", value: 39},
  {x: "Defense", value: 43},
  {x: "Special Defense", value: 50},
  {x: "Special Attack", value: 60},
  {x: "Attack", value: 52},
];

如您所知，这更多的是艺术而不是科学。但是，如您在下面看到的，我们对不同的配置文件有了更好的了解。

<html>
  <head>
    <script src="//cdn.anychart.com/releases/8.7.1/js/anychart-core.min.js"></script>
    <script src="//cdn.anychart.com/releases/8.7.1/js/anychart-radar.min.js"></script>
    <style type="text/css">
      html, body, #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
  </body>
  <script>
    anychart.onDocumentReady(function () {
      // our data from bulbapedia
     var data1 = [
       {x: "Speed", value: 65},
       {x: "HP", value: 39},
       {x: "Defense", value: 43},
       {x: "Special Defense", value: 50},
       {x: "Special Attack", value: 60},
       {x: "Attack", value: 52}
     ];

     var data2 = [
       {x: "Speed", value: 45},
       {x: "HP", value: 45},
       {x: "Defense", value: 49},
       {x: "Special Defense", value: 65},
       {x: "Special Attack", value: 65},
       {x: "Attack", value: 49}
     ];  

     var data3 = [
       {x: "Speed", value: 43},
       {x: "HP", value: 44},
       {x: "Defense", value: 65},
       {x: "Special Defense", value: 64},
       {x: "Special Attack", value: 50},
       {x: "Attack", value: 48}
     ];  

     // create radar chart
     var chart = anychart.radar();

     // set chart yScale settings
     chart.yScale()
       .minimum(35)
       .maximum(65)
       .ticks({'interval':5});

      // color alternating cells
      chart.yGrid().palette(["gray 0.1", "gray 0.2"]);

      // create first series
      chart.area(data1).name('Charmander').markers(true).fill("#E55934", 0.3).stroke("#E55934")
      // create second series
      chart.area(data2).name('Bulbasaur').markers(true).fill("#9BC53D", 0.3).stroke("#9BC53D")
      // create third series
      chart.area(data3).name('Squirtle').markers(true).fill("#5BC0EB", 0.3).stroke("#5BC0EB")

      // set chart title
      chart.title("Starter Pokemon Comparison Chart")
        // set legend
        .legend(true);

      // set container id for the chart
      chart.container('container');
      // initiate chart drawing
      chart.draw();

    });
  </script>
</html>

我们可以清楚地看到Charmander更具进攻性，Squirtle更具防守性，而Bulbasaur更加全面。因此，我想说的是，使用这张图表（我意识到这是一个反气候结论），我们可以清楚地看到所有神奇宝贝都是正确的选择。它们都非常平衡，各有优缺点。

结论

制作雷达图显然比大多数人想象的要容易得多，我认为结果非常酷并且引人入胜。但是，它们比其他数据可视化要难用，并且具有许多缺点。

如果变量太多，该图表将变得难以阅读。如果观察值太多，建议将其分离到自己的图表中。他们还需要所有变量具有相同的比例。还要注意，用户倾向于将观察区域视为价值的衡量标准，不幸的是，事实并非如此。

考虑到这些注意事项，我建议改用折线图或条形图。雷达图真正闪耀的地方在于，在吸引用户时，它们可能比折线图和条形图要强大得多，因此，在工作时，它们工作得很好！

想要购买Anychart正版授权，或了解更多产品信息请点击