利用d3.js绘制雷达图

利用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绘制雷达图,布布扣,bubuko.com

时间: 2024-10-14 07:25:13

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

利用d3.js绘制中国地图

d3.js是一个比较强的数据可视化js工具.利用它画了一幅中国地图,如下图所示: 源码如下: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="d3.js"></script> <script type="text/javascript" src="d3.csv.js">&l

利用matlibplot绘制雷达图

之前在一些数据分析案例中看到用 Go 语言绘制的雷达图,非常的漂亮,就想着用matlibplot.pyplot也照着画一个,遗憾的是matlibplot.pyplot模块中没有直接绘制雷达图的函数,不过可以基于‘polar’图形特征来改进,下面就记录一下如何绘制雷达图. import numpy as np import matplotlib.pyplot as plt # 用于正常显示中文 plt.rcParams['font.sans-serif'] = 'SimHei' #用于正常显示符号

使用D3.js绘制地图并打点

本篇简单介绍一下使用D3.js绘制地图,并更具经纬度在地图打点.最后根据点生成voronoi图及其三角网. 下载地图geoJson文件 去网上下载要绘制地图的geoJson文件. 使用d3.json()加载地图文件,这里为了方便加载我把geoJson文件放在了js文件里. 绘制地图 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>

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

原文:Emgu-WPF 激光雷达研究-绘制雷达图 硬件:Hokuyo URG04LX 环境:VS2017- win10- 64??Emgu_3.2.0.2682 语言:C#? WPF?? 数据解析参考: https://sourceforge.net/p/urgnetwork/wiki/Home/ https://github.com/bqhdev/urg04lx_data_decoder http://sourceforge.net/projects/urgnetwork/files/urg_

【带着canvas去流浪(6)】绘制雷达图

目录 一. 任务说明 二. 重点提示 三. 示例代码 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文目录 华为云社区地址:[你要的前端打怪升级指南] 一. 任务说明 使用原生canvasAPI绘制雷达图.(截图以及数据来自于百度Echarts官方示例库[查看示例链接]). 二. 重点提示 雷达图绘制的看起来并不复杂,无非就是一些路径点的连线,其中的难点都在于一些细节. 坐标转换 为了避免在绘制过程中不断根据

使用d3.js 绘制交互树

d3.js 中包含了丰富的用于表达树和图的例子: http://d3js.org 以下代码示例中,用于表示交互的树: <!DOCTYPE html> <meta charset="utf-8"> <style> .node { cursor: pointer; } .node circle { fill: #fff; stroke: steelblue; stroke-width: 1.5px; } .node text { font: 10px s

Mesh绘制雷达图(UGUI)

/******************************************************************************** 参考资料:http://www.cnblogs.com/jeason1997/p/5130413.html ** 类名称: RadarEditor ** 描述:雷达图 ** 作者: 田树东 *************************************************************************

d3.js 绘制北京市地铁线路状况图(部分)

地铁线路图的可视化一直都是路网公司的重点,今天来和大家一起绘制线路图.先上图. 点击线路按钮,显示相应的线路.点击线路图下面的站间按钮(图上未显示),上报站间故障. 首先就是制作json文件,这个文件包括两部分,一部分是站点信息,另一部分就是线路信息,由于时间问题,我只写了5条线路(10号线站点太tm多了): 然后就是构造类文件,不多说: 之后就是主要的操作线路图的逻辑,还画了一个天安门. 好了废话不多说,下面上代码 1.主要代码 <!DOCTYPE html> <html lang=&

基于D3.js 绘制一个折柱混合图

测试题目:使用 D3 绘制一个折柱混合图,示例数据如下: data = [ ["时间", "销售额", "增长率(%)"], ["一月", 27506, 20.8], ["二月", 24399, 5.4], ["三月", 23120, 22], ["四月", 22053, 0.4], ["五月", 21221, 3.1], ["六月&qu