利用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. HTML5的Server-Sent Events (SSE)

    HTML5有一个Server-Sent Events(SSE)功能,允许服务端推送数据到客户端.(通常叫数据推送).我们来看下,传统的WEB应用程序通信时的简单时序图: 现在Web App中,大都有A ...

  2. 那些年被我坑过的Python——玄而又玄（第六章 面向对象编程基础）

    面向对象编程: 面向对象顾名思义,就是把组织代码的粒度从函数级别抽象到对象级别,对象是通过类来生成的,类可以想象为模板或进本框架而对象是在原有模板或框架的基础上增加详细信息的实体,类,有分类.聚类的含 ...

  3. jquery获取元素的所有宽高（包括内边距和外边距）

    width() - 返回元素的宽度.height() - 返回元素的高度.innerWidth() 方法返回元素的宽度(包括内边距).                    innerHeight() ...

  4. C语言学习之笔记

    第一章 概述 1． C语言的特点 ①语言简洁.紧凑,使用方便.灵活.共有32个关键字(也称保留字),9种控制语句. ②运算符丰富,共有34种运算符. ③数据结构丰富,数据类型有:整型.实型.字符型.数 ...

  5. loadView与viewDidLoad不同 && loadView学习总结

    loadView学习总结 UIViewController类或其子类会在初始化时创建一个UIView对象,会作为控制器的默认视图显示出来,可以通过self.view寻址访问.但没有调用loadView ...

  6. 转：FIFO和DMA

    FIFO SPI端口增加了FIFO,使得传输数据有了缓冲区间. FIFO存储器是一个先入先出的双口缓冲器,即第一个进入其内的数据第一个被移出,其中一个存储器的输入口,另一个口是存储器的输出口.主要有三 ...

  7. SCVMM更换数据库，如何搞？

    因为SCVMM和SQL不是集成在同一台机器上的. 所以,当SQL换机器或是换名字后,SCVMM就不能启动了. 并且MS没提供直观的更改数据库连接的工具,只是在安装的时候有选项. 网上找了方法,修改注册 ...

  8. 看奢侈品Prada如何使用物联网

    这是峰哥在一家国际顶级商学院听课的笔记.这是个巨变的时代,有趣的时代. 一 PRADA在纽约的旗舰店.每件衣服上都有RFID码.每当一个顾客拿起一件PRADA进试衣间,RFID会被自动识别,试衣间里的 ...

  9. Eclipse控制台中文乱码

    换了OS真是,主要就是对Eclipse的配置操作不熟悉.用着不顺手.源文件一直都是按照google java style的做法保存为UTF-8.现在显示乱码,就得改Eclipse解码的配置为 UTF- ...

  10. Java this 心得

    用类名定义一个变量的时候,定义的应该只是一个引用,外面可以通过这个引用来访问这个类里面的属性和方法,那们类里面是否也应该有一个引用来访问自己的属性和方法纳?呵呵,JAVA提供了一个很好的东西,就是 t ...