半岛外围网上直营

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

点击下载Anychart最新试用版

数据可视化任务

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

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

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

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

方案概述

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 = "//image.flaticon.com/icons/svg/65/65680.svg";
    if (this.getData("deviceType") === "wifi")
      src = "//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} dB\nMAC 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 = "//image.flaticon.com/icons/svg/65/65680.svg";
    if (this.getData("deviceType") === "laptop")
      src = "//image.flaticon.com/icons/png/128/59/59505.png";
    if (this.getData("deviceType") === "tablet")
      src = "//cdn2.iconfinder.com/data/icons/font-awesome/1792/tablet-128.png";
    if (this.getData("deviceType") === "wifi")
      src = "//image.flaticon.com/icons/png/128/34/34143.png";
    return {
      src: src,
      mode: 'fit',
      opacity: 1
    }
  }
});

想要购买Anychart正版授权的朋友可以。

有关产品资讯的更多精彩内容，敬请关注下方的微信公众号▼▼▼