利用d3,js将数据可视化，能够做到数据与代码的分离。方便以后改动数据。

这次利用d3.js绘制了一个五维的雷达图。即将多个对象的五种属性在一张图上对照。

数据写入data.csv、数据类型写入type.csv文件。

效果例如以下图所看到的

源代码连接：http://download.csdn.net/detail/svap1/7358123

使用是仅仅需调用 radar()函数就可以。例如以下是測试页面代码。

<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

  <title>Radar chart</title>

    <script src="d3.v3.min.js"></script>

	<script src="RadarChart.js"></script>

  </head>

  <body style='background:#222;margin:0;'>

	<div id="chart" style='width:400px;margin:0px;'></div>

    <script type="text/javascript" src="ra2.js"></script>

	<script  type="text/javascript" >

		radar('#chart','type.csv','data.csv');

	</script>

  </body>

</html>

利用d3.js绘制雷达图的更多相关文章

  1. 利用d3.js绘制中国地图

    d3.js是一个比較强的数据可视化js工具. 利用它画了一幅中国地图,例如以下图所看到的: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3ZhcDE=/ ...

  2. 利用matlibplot绘制雷达图

    之前在一些数据分析案例中看到用 Go 语言绘制的雷达图,非常的漂亮,就想着用matlibplot.pyplot也照着画一个,遗憾的是matlibplot.pyplot模块中没有直接绘制雷达图的函数,不 ...

  3. D3.js力导向图(适用于其他类型图)中后添加元素遮盖已有元素的问题解决

    上一篇说了在D3.js中动态增加节点及连线的一种实现方式,但是有后添加元素遮盖原节点的现象,这一篇说一下出现这个现象的解决办法. 在D3.js中后添加的元素是会遮盖先添加的元素的,同时还有一个设定:后 ...

  4. 【带着canvas去流浪（6）】绘制雷达图

    目录 一. 任务说明 二. 重点提示 三. 示例代码 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文 ...

  5. Emgu-WPF 激光雷达研究-绘制雷达图

    原文:Emgu-WPF 激光雷达研究-绘制雷达图 硬件:Hokuyo URG04LX 环境:VS2017- win10- 64  Emgu_3.2.0.2682 语言:C#  WPF   数据解析参考 ...

  6. 带着canvas去流浪系列之六 绘制雷达图

    [摘要] 用canvas原生API实现百度Echarts基本图表. 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvas ...

  7. D3.js 力导向图的显示优化

    D3.js 作为一个前端,说到可视化除了听过 D3.js 的大名,常见的可视化库还有 ECharts.Chart.js,这两个库功能也很强大,但是有一个共同特点是封装层次高,留给开发者可设计和控制的部 ...

  8. D3.js力导向图中新增节点及新增关系连线示例

    大家在使用D3.js中的力导向图时,基本都会遇到动态增加节点及连线的需求,这里记录一下我的实现方式. 话不多说,先放代码: <!DOCTYPE html> <html lang=&q ...

  9. Mesh绘制雷达图（UGUI）

    参考资料:http://www.cnblogs.com/jeason1997/p/5130413.html ** 描述:雷达图 刷新 radarDate.SetVerticesDirty(); usi ...

随机推荐

  1. 你应该了解的5个JavaScript调试技巧

    在某些情况下需要更好的工具,下面是其中的一些佼佼者,我敢肯定你会发现它们的有用之处: 1. debugger; 正如我之前提到的,你可以使用“debugger;”语句在代码中加入强制断点. 需要断点条 ...

  2. 【转】linux 必须掌握的60个命令

    Linux必学的60个命令Linux提供了大量的命令,利用它可以有效地完成大量的工作,如磁盘操作.文件存取.目录操作.进程管理.文件权限设定等.所以,在Linux系统上工作离不开使用系统提供的命令.要 ...

  3. yii2源码学习笔记(七）

    今天继续了解model类 /** 2 * Returns the form name that this model class should use. 3 * 4 * 返回表单的名称,就是这个 mo ...

  4. Bootstrap 和 LESS

    Bootstrap 简介 什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的 ...

  5. 开发DZ插件教程

    插件制作的基本思路是:(初学者适用)1.形成插件思路2.制作插件界面3.构架程序模块4.搭建存储数据5.填充功能语句6.检查应用错误7.完善插件功能 前言:为方便互联网数万Discuz!爱好者,更加深 ...

  6. Java中权限修饰符public、private、protected和default的区别

    1.public 可以修饰类.成员变量和成员函数,没有任何限制,同一个包中,或者不同包中的类都可以自由访问 2.private 可以修饰成员变量和成员函数,只能在本类中使用 3.default (不写 ...

  7. 转： Linux C 动态内存分配 malloc及相关内容 .

    一.malloc()和free()的基本概念以及基本用法: 1.函数原型及说明: void *malloc(long NumBytes):该函数分配了NumBytes个字节,并返回了指向这块内存的指针 ...

  8. DB2中的系统表SYSIBM.SYSDUMMY1

    ORACLE中有一张系统数据库表DUAL用来访问系统的相关信息 SELECT SYSDATE FROM DUAL;  --返回当前系统日期 ------------------------------ ...

  9. Maven实战七

    转载:http://www.iteye.com/topic/973166 前言 Maven,发音是[`meivin],"专家"的意思.它是一个很好的项目管理工具,很早就进入了我的必 ...

  10. java敏感词过滤

    敏感词过滤在网站开发必不可少.一般用DFA,这种比较好的算法实现的. 参考链接:http://cmsblogs.com/?p=1031 一个比较好的代码实现: import java.io.IOExc ...