跨平台图表控件AnyChart教程：JavaScript中的自定义WiFi极坐标图

AnyChart是灵活的高度可定制的跨浏览器、跨平台JavaScript (HTML5) 图表控件。本教程将为您介绍如何建立一个漂亮的WiFi极坐标图:一个定制的交互式JS（HTML5）极坐标图表，根据WiFi信 强度显示设备。

我们将继续更新 Challenge AnyChart！我们提供了新的数据可视化教程。他们很好地展示了我们的JavaScript图表库是多么强大。今天的挑战是建立一个漂亮的WiFi极坐标图：一个定制的交互式JS（HTML5）极坐标图表，根据WiFi信 强度显示设备。

数据可视化任务

客户希望我们回答的问题是：

如何使用AnyChart图表库创建一个极坐标图表，显示不同接收区域中的设备：优秀，良好，中等和不良/p>

为了说明图表的外观，客户附上了以下图片：

他们还提到图片中的数字应附有图标，以直观地表示每个设备的类型。

方案概述

AnyChart API的极坐标图类方法将有助于解决这个有趣的数据可视化任务。

●首先，绘制极坐标图并为不同的接收区域添加调色板。

●然后使数据点看起来像设备，并在图表图例上更多地调整可视化。

●创建WiFi极坐标图

●按照JS极坐标图文档绘制图表并添加调色板。

您可以按如下方式设置极坐标图的数据：

var data = [    {x: 0,   value: 0, signal: 0, name: "WiFi hotspot", deviceType: "wifi", mac: 'BF-AD-3A-36-A4-BE'},    {index: 1, x: 0,   value: 2, signal: -8, name: "iPhone X", deviceType: "phone", mac: 'D6-18-CD-D4-DE-D2'},    {index: 2, x: 90,  value: 4, signal: -35, name: "Samsung s8", deviceType: "phone", mac: '03-ED-5C-E2-76-F4'}  ];

完成后，创建一个函数，负责使用数据中deviceType已定义的字段将图像链接到数据点：

function placeImages() {    var src;    if (this.getData("deviceType") === "phone")      src = "https://image.flaticon.com/icons/svg/65/65680.svg";    if (this.getData("deviceType") === "wifi")      src = "https://image.flaticon.com/icons/png/128/34/34143.png";    return {      src: src,      mode: 'fit',      opacity: 1    }  }

调整系列外观时执行该功能：

series.normal().fill(placeImages);series.selected().fill(placeImages).stroke('#0f4b86', 3);

您需要的最后一件事是使用anychart.standalones.legend（）为WiFi极坐标图设置一个图例：

var legend = anychart.standalones.legend();    var legendItems = [      {        text: 'Excellent',        iconType: "square",        iconFill: '#6cd053',        iconStroke: {color: 'black', thickness: 2}      },

并通过添加以下代码使其在鼠标悬停上交互：

legend.listen("legendItemMouseOver", function(e){      // highlight the area      polar.yGrid().palette().itemAt(e.itemIndex + 1, "White 0.7");    });    legend.listen("legendItemMouseOut", function(e){        // reset the grid to default    polar.yGrid().palette(gridPalette);      });

基于JavaScript的自定义WiFi极坐标图已准备就绪。它可以在AnyChart Playground上找到并修改  。

WiFi极坐标图样本的完整代码如下：

anychart.onDocumentReady(function() {  // create a stage  var stage = anychart.graphics.create("container");  // create data  var data = [    {x: 0,   value: 0, signal: 0, name: "WiFi hotspot", deviceType: "wifi", mac: 'BF-AD-3A-36-A4-BE'},    {index: 1, x: 0,   value: 2, signal: -8, name: "iPhone X", deviceType: "phone", mac: 'D6-18-CD-D4-DE-D2'},    {index: 2, x: 90,  value: 4, signal: -35, name: "Samsung s8", deviceType: "phone", mac: '03-ED-5C-E2-76-F4'},    {index: 3, x: 50,  value: 4, signal: -47, name: "Oneplus3T", deviceType: "phone", mac: '49-5C-D8-54-5A-5B'},    {index: 4, x: 120, value: 8, signal: -72, name: "Nokia 6", deviceType: "phone", mac: 'C5-F4-29-05-67-0D'},    {index: 5, x: 170, value: 2, signal: -12, name: "Samsung Note9", deviceType: "phone", mac: '91-72-36-E5-C1-0C'},    {index: 6, x: 200, value: 4, signal: -37, name: "iPhone XS", deviceType: "phone", mac: 'F5-C3-0F-2B-C8-AE'},    {index: 7, x: 210, value: 2, signal: -20, name: "Dell XPS", deviceType: "laptop", mac: '44-99-CF-1E-61-CD'},    {index: 8, x: 300, value: 4, signal: -42, name: "Apple MBP", deviceType: "laptop", mac: '2A-76-AC-F0-52-89'},    {index: 9, x: 100, value: 2, signal: -25, name: "Lenovo Tab3", deviceType: "tablet", mac: '6B-CC-F8-E8-21-6C'}  ];  //create a chart  var polar = anychart.polar();  var dataSet = anychart.data.set(data);  //create a series  var series = polar.marker(dataSet);  //adjust the series appearance  series.type('circle');  series.normal().fill(placeImages);  series.normal().size(15).stroke(null);  series.hovered().size(17);  series.selected().size(17);  series.selected().fill(placeImages).stroke('#0f4b86', 3);  series.labels(true);  series.labels()    .anchor('center')    .offsetY(-2)    .fontSize(12)    .fontColor('white')    .format(function() {    return this.getData('index');  });  var gridPalette = [["#70e952 0.8", "#61da44 0.8"], ["#6cd053 0.8", "#39d811 0.8"], ["#46978d 0.8", "#05bda5 0.8"], ["#274553 0.8", "#01638f 0.8"], ["#28323c 0.8", "#596985 0.8"]];  //adjust scales and axes  polar.yGrid().palette(gridPalette);  polar.yGrid().stroke("black", 6);  polar.xGrid(false);  polar.xScale().maximum(360);  polar.yScale()    .maximum(9)    .minimum(0)    .ticks([0, 1, 3, 5, 7, 9]);  polar.xAxis(false);  polar.yAxis(false);  polar.yAxis().stroke(null);  polar.background("#1f2429");  //adjust the tooltip  polar.tooltip().format("Singnal strenthg: {%signal} dBnMAC address: {%mac}");  polar.tooltip().titleFormat('{%name}');  polar.container(stage).draw();  //create and adjust a standalone legend  var legend = anychart.standalones.legend();  var legendItems = [    {      text: 'Excellent',      iconType: "square",      iconFill: '#6cd053',      iconStroke: {color: 'black', thickness: 2}    },    {      text: 'Good',      iconType: "square",      iconFill: '#46978d',      iconStroke: {color: 'black', thickness: 2}    },    {      text: 'Average',      iconType: "square",      iconFill: '#274553',      iconStroke: {color: 'black', thickness: 2}    },    {      text: 'Poor',      iconType: "square",      iconFill: '#28323c',      iconStroke: {color: 'black', thickness: 2}    }  ];  legend    .items(legendItems)    .itemsLayout('vertical')    .align('left')    .padding(5)    .container(stage).draw();  legend.listen("legendItemMouseOver", function(e){    // highlight the area    polar.yGrid().palette().itemAt(e.itemIndex + 1, "White 0.7");  });  legend.listen("legendItemMouseOut", function(e){    // reset the grid to default    polar.yGrid().palette(gridPalette);    });  function placeImages() {    var src;    if (this.getData("deviceType") === "phone")      src = "https://image.flaticon.com/icons/svg/65/65680.svg";    if (this.getData("deviceType") === "laptop")      src = "https://image.flaticon.com/icons/png/128/59/59505.png";    if (this.getData("deviceType") === "tablet")      src = "https://cdn2.iconfinder.com/data/icons/font-awesome/1792/tablet-128.png";    if (this.getData("deviceType") === "wifi")      src = "https://image.flaticon.com/icons/png/128/34/34143.png";    return {      src: src,      mode: 'fit',      opacity: 1    }  }});

想要购买Anychart正版授权的朋友可以咨询官方客服。

标签：