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

翻译|使用教程|编辑:吴园园|2019-07-19 10:05:43.293|阅读 46 次

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

AnyChart教程:JavaScript中的自定义WiFi极坐标图

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

点击下载Anychart最新试用版

数据可视化任务

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

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

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

AnyChart教程:JavaScript中的自定义WiFi极坐标图

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

方案概述

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上找到并修改  。

AnyChart教程:JavaScript中的自定义WiFi极坐标图

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 = "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正版授权的朋友可以咨询慧都官方客服

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

图片2.jpg



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:AnyChart https://www.anychart.com/blog/2019/01/02/custom-wifi-polar-chart-javascript/

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
AnyChart

灵活的高度可定制的跨浏览器、跨平台JavaScript (HTML5) 图表控件。

在线客服 在线QQ 电话咨询
400-700-1020
反馈
在线客服系统
live chat