在本教程中，我将教您如何使用JavaScript构建自己的雷达图，以及如何使用它们来帮助您完成游戏历史上最艰难的决定之一：选择哪个开始的神奇宝贝！
AnyChart是基于JavaScript (HTML5) 的图表控件。使用AnyChart控件，可创建跨浏览器和跨平台的交互式图表和仪表。AnyChart 图表目前已被很多知名大公司所使用，可用于仪表盘、 表、数据分析、统计学、金融等领域。
AnyChart正式版
教程介绍如何在JavaScript HTML5中创建和编码交互式雷达图雷达图（也称为蜘蛛图或雷达图）是一种数据可视化，用于比较具有多个定量变量的观测值。每个变量编码为等距分开的辐条。值越高，指向图表的中心越远。雷达图最适合用来比较观测的“轮廓”并检测数据中的异常值。因此，它们在体育运动中被大量使用，最显着的是在篮球和足球中用于对运动员进行剖析。
没错，我们将构建雷达图以对Bulbasaur，Charmander和Squirtle进行数据分析，从而一劳永逸地确定这是最佳选择。
建立JavaScript雷达图
为了建立雷达图，我们将使用一个图表库。图表库消除了构建图表的许多负担（与d3.js之类的相比），使您可以快速轻松地获取图表。在本教程中，我选择使用AnyChart JavaScript库。我之所以选择AnyChart，是因为使用它构建图表非常快，并且由于文档非常密集，它对于初学者来说是一个了不起的库。
步骤1：设定页面
创建雷达图的第一步是设置html页面并加载所需的脚本。
<html> <head> <script src="https://cdn.anychart.com/releases/8.7.1/js/anychart-core.min.js"></script> <script src="https://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：载入资料
然后，我们需要将此数据重新格式化为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 chartvar chart = anychart.radar();// set chart titlechart.title("Starter Pokemon Comparison Chart");// set chart yScale settingschart.yScale() .minimum(0) .maximum(100) .ticks({'interval':20});// create first serieschart.line(data1)// create second serieschart.line(data2)// create third serieschart.line(data3)// set container id for the chartchart.container('container');// initiate chart drawingchart.draw();
结果是：
这看起来不太有用吗同的系列看起来都一样。我们可以轻松解决此问题。如果我们更改最小和最大yScale值，我们将能够更好地看到3个系列之间的差异。然后，将最大值设置为65，将最小值设置为35，然后根据要尝试可视化的数据选择这些值。如果我们其中一个口袋妖怪的变量值大于65或小于35，我会选择其他值来适应该变量。
// set chart yScale settingschart.yScale() .minimum(35) .maximum(65) .ticks({'interval':5});
<html> <head> <script src="https://cdn.anychart.com/releases/8.7.1/js/anychart-core.min.js"></script> <script src="https://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 cellschart.yGrid().palette(["gray 0.1", "gray 0.2"]);
该代码将雷达单元变成灰色，而交替的单元具有不同的不透明度*。
*使用不透明度是众所周知的技巧，可以使不同的颜色完美搭配。
面积，填充，描边和图例
为了更好地描述我们的不同系列，我将系列类型从线条更改为区域。这将使我们能够更改多边形的填充。我还将更改每个系列的颜色，以更好地表示所讨论的神奇宝贝。
// create first serieschart.area(data1).name('Charmander').markers(true).fill("#E55934", 0.3).stroke("#E55934")// create second serieschart.area(data2).name('Bulbasaur').markers(true).fill("#9BC53D", 0.3).stroke("#9BC53D")// create third serieschart.area(data3).name('Squirtle').markers(true).fill("#5BC0EB", 0.3).stroke("#5BC0EB")
一个传说也可以让我们分辨出哪个系列。
// set chart titlechart.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="https://cdn.anychart.com/releases/8.7.1/js/anychart-core.min.js"></script> <script src="https://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正版授权，或了解更多产品信息请点击【咨询在线客服】
标签：
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！