我們將繼續更新 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正版授權的朋友可以。

有關產品資訊的更多精彩內容，敬請關注下方的微信公眾號▼▼▼