JavaScript可视化——Flotr2散点图

最新推荐文章于 2021-10-26 16:34:49 发布
最新推荐文章于 2021-10-26 16:34:49 发布
阅读量402 收藏 2
点赞数
分类专栏： 前端 文章标签： js flotr2 散点图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huayunhualuo/article/details/103515440
版权

散点图

定义数据

将经合组织2012年报告健康体检花费价格占全国生产总值的比例。

var pacific_data = [
    {  country: "Australia",       spending:  9.1,  life: 81.8  },
    {  country: "New Zealand",     spending: 10.1,  life: 81.0  },
];
var europe_data = [
    {  country: "Austria",         spending: 11.0,  life: 80.7  },
    {  country: "Belgium",         spending: 10.5,  life: 80.3  },
    {  country: "Czech Republic",  spending:  7.5,  life: 77.7  },
    {  country: "Denmark",         spending: 11.1,  life: 79.3  },
    {  country: "Estonia",         spending:  6.3,  life: 75.6  },
    {  country: "Finland",         spending:  8.9,  life: 80.2  },
    {  country: "France",          spending: 11.6,  life: 81.3  },
    {  country: "Germany",         spending: 11.6,  life: 80.5  },
    {  country: "Greece",          spending: 10.2,  life: 80.6  },
    {  country: "Hungary",         spending:  7.8,  life: 74.3  },
    {  country: "Iceland",         spending:  9.3,  life: 81.5  },
    {  country: "Ireland",         spending:  9.2,  life: 81.0  },
    {  country: "Italy",           spending:  9.3,  life: 82.0  },
    {  country: "Luxembourg",      spending:  7.9,  life: 80.7  },
    {  country: "Netherlands",     spending: 12.0,  life: 80.8  },
    {  country: "Norway",          spending:  9.4,  life: 81.2  },
    {  country: "Poland",          spending:  7.0,  life: 76.3  },
    {  country: "Portugal",        spending: 10.7,  life: 79.8  },
    {  country: "Slovak Republic", spending:  9.0,  life: 75.2  },
    {  country: "Slovenia",        spending:  9.0,  life: 79.5  },
    {  country: "Spain",           spending:  9.6,  life: 82.2  },
    {  country: "Sweden",          spending:  9.6,  life: 81.5  },
    {  country: "Switzerland",     spending: 11.4,  life: 82.6  },
    {  country: "Turkey",          spending:  6.1,  life: 74.3  },
    {  country: "United Kingdom",  spending:  9.6,  life: 80.6  },
];
var americas_data = [
    {  country: "Canada",          spending: 11.4,  life: 80.8  },
    {  country: "Chile",           spending:  8.0,  life: 79.0  },
    {  country: "Mexico",          spending:  6.2,  life: 75.5  },
    {  country: "United States",   spending: 17.6,  life: 78.7  },
];
var mideast_data = [
    {  country: "Israel",          spending:  7.5,  life: 81.7  },
];
var asia_data = [
    {  country: "Japan",           spending:  9.5,  life: 83.0  },
    {  country: "Korea",           spending:  7.1,  life: 80.7  },
];
var us_data = [
    {  country: "United States",   spending: 17.6,  life: 78.7  },
];

格式化数据

var pacific = [], europe = [], americas = [], mideast = [], asia = [], us = [];
for (var i = 0;i< pacific_data.length; i++) {
	pacific.push([pacific_data[i].spending, pacific_data[i].life]);
}
for (var i = 0;i< europe_data.length; i++) {
	europe.push([europe_data[i].spending, europe_data[i].life]);
}
for (var i = 0; i < americas_data.length; i++) {
	americas.push([ americas_data[i].spending, americas_data[i].life ]);
}
for (var i = 0; i < mideast_data.length; i++) {
	mideast.push([ mideast_data[i].spending, mideast_data[i].life ]);
}
for (var i = 0; i < asia_data.length; i++) {
	asia.push([ asia_data[i].spending, asia_data[i].life ]);
}
for (var i = 0; i < us_data.length; i++) {
	us.push([ us_data[i].spending, us_data[i].life ]);
}

绘制数据

Flotr.draw(
	document.getElementById("chart"),
	[
		{
			data:europe,
			points:{
				show:true,
			}
		}
	]
);

在这里插入图片描述

调整图表的轴

Flotr2会自动计算每个轴的范围，且默认的算法结果通常间距都很小。

{
	xaxis:{
		min:5,
		max:20,
	},
	yaxis:{
		min:70, 
		max:85
	},
	grid:{
		horizontalLines:false,
		verticalLines : false,
	}
},

在这里插入图片描述

标注数据

在这里插入图片描述

阐明x轴

tickFormatter: function(val) {
	return val + "%";
}

展示不同的国家

在这里插入图片描述

加入标签
在这里插入图片描述

全部代码

<!DOCTYPE html>
<html lang = "en">
	<head>
		<meta charset = "utf-8">
		<title></title>
		<script src = "js/flotr2.min.js"> </script>
	</head>
	<body> 
		<div id="chart" style="width:800px;height:400px;"></div>
	</body>
	<script>
		window.onload = function() {
			var pacific_data = [
				{  country: "Australia",       spending:  9.1,  life: 81.8  },
				{  country: "New Zealand",     spending: 10.1,  life: 81.0  },
			];
			var europe_data = [
				{  country: "Austria",         spending: 11.0,  life: 80.7  },
				{  country: "Belgium",         spending: 10.5,  life: 80.3  },
				{  country: "Czech Republic",  spending:  7.5,  life: 77.7  },
				{  country: "Denmark",         spending: 11.1,  life: 79.3  },
				{  country: "Estonia",         spending:  6.3,  life: 75.6  },
				{  country: "Finland",         spending:  8.9,  life: 80.2  },
				{  country: "France",          spending: 11.6,  life: 81.3  },
				{  country: "Germany",         spending: 11.6,  life: 80.5  },
				{  country: "Greece",          spending: 10.2,  life: 80.6  },
				{  country: "Hungary",         spending:  7.8,  life: 74.3  },
				{  country: "Iceland",         spending:  9.3,  life: 81.5  },
				{  country: "Ireland",         spending:  9.2,  life: 81.0  },
				{  country: "Italy",           spending:  9.3,  life: 82.0  },
				{  country: "Luxembourg",      spending:  7.9,  life: 80.7  },
				{  country: "Netherlands",     spending: 12.0,  life: 80.8  },
				{  country: "Norway",          spending:  9.4,  life: 81.2  },
				{  country: "Poland",          spending:  7.0,  life: 76.3  },
				{  country: "Portugal",        spending: 10.7,  life: 79.8  },
				{  country: "Slovak Republic", spending:  9.0,  life: 75.2  },
				{  country: "Slovenia",        spending:  9.0,  life: 79.5  },
				{  country: "Spain",           spending:  9.6,  life: 82.2  },
				{  country: "Sweden",          spending:  9.6,  life: 81.5  },
				{  country: "Switzerland",     spending: 11.4,  life: 82.6  },
				{  country: "Turkey",          spending:  6.1,  life: 74.3  },
				{  country: "United Kingdom",  spending:  9.6,  life: 80.6  },
			];
			var americas_data = [
				{  country: "Canada",          spending: 11.4,  life: 80.8  },
				{  country: "Chile",           spending:  8.0,  life: 79.0  },
				{  country: "Mexico",          spending:  6.2,  life: 75.5  },
				{  country: "United States",   spending: 17.6,  life: 78.7  },
			];
			var mideast_data = [
				{  country: "Israel",          spending:  7.5,  life: 81.7  },
			];
			var asia_data = [
				{  country: "Japan",           spending:  9.5,  life: 83.0  },
				{  country: "Korea",           spending:  7.1,  life: 80.7  },
			];
			var us_data = [
				{  country: "United States",   spending: 17.6,  life: 78.7  },
			];
			var pacific = [], europe = [], americas = [], mideast = [], asia = [], us = [];
			for (var i = 0;i< pacific_data.length; i++) {
				pacific.push([pacific_data[i].spending, pacific_data[i].life]);
			}
			for (var i = 0;i< europe_data.length; i++) {
				europe.push([europe_data[i].spending, europe_data[i].life]);
			}
			for (var i = 0; i < americas_data.length; i++) {
				americas.push([ americas_data[i].spending, americas_data[i].life ]);
			}
			for (var i = 0; i < mideast_data.length; i++) {
				mideast.push([ mideast_data[i].spending, mideast_data[i].life ]);
			}
			for (var i = 0; i < asia_data.length; i++) {
				asia.push([ asia_data[i].spending, asia_data[i].life ]);
			}
			for (var i = 0; i < us_data.length; i++) {
				us.push([ us_data[i].spending, us_data[i].life ]);
			}
			Flotr.draw(
				document.getElementById("chart"),
				[
					{
						data:pacific,
						label:"Pacific",
						points:{
							show:true,
						}
					},
					{
						data:europe,
						label:"Europe",
						points:{
							show:true,
						}
					},
					{
						data:americas,
						label:"Americas",
						points:{
							show:true,
						}
					},
					{
						data:mideast,
						label:"Mideast",
						points:{
							show:true,
						}
					},
					{
						data:asia,
						label:"Asia",
						points:{
							show:true,
						}
					},
					{
						data:us,
						points:{
							show:true,
						}
					}
				],
				{
					title:"Life Expectancy vs. Health-Care Spending",
					subtitle:"{by country , 2010 OECD data}",
					xaxis:{
						min:5,
						max:20,
						title:"Spending as Percentage of GDP",
						tickFormatter: function(val) {
							return val + "%";
						}
					},
					yaxis:{
						min:70, 
						max:85,
						title:"Years"
					},
					grid:{
						horizontalLines:false,
						verticalLines : false,
					}
				},
				
			);
		}	
	</script>
</html>
绝尘花遗落
关注
专栏目录
JavaScript 3D 散点图
ArctionLtd的博客
03-29 1342
3D 散点图
D3.js v5.0 散点图
m0_37777005的博客
05-30 566
数据结构： [ { “name”: ‘’, “x”: ‘’, “y”:’’ }, ] import * as d3 from 'd3'; export default function scatter(id, data) { (() => { d3.select(id) .selectAll('svg') .remove(); })(); con...
chart.js使用学习——散点图
gc_2299的博客
10-21 1161
学习chart.js中散点图的基本用法
D3.js-散点图
李刚的学习专栏
10-09 8536
散点图（Scatter Chart），通常是一横一竖两个坐标轴，数据时一组二维坐标，分别对应两个坐标轴，与坐标轴对应的地方打上点。 一、圆点圆心数据：var dataset = [[0.5, 0.5],[0.7, 0.8],[0.4, 0.9], [0.11, 0.32],[0.88, 0.25],[0.75, 0.12], [0.5, 0.1],[0.2, 0.3],[0.4, 0
LightningChart使用教程：创建 JS 散点图
Augenstern__zyx的博客
10-26 1130
这是对 LightningChart JS XY 图表一些有趣功能的快速技术研究，以及如何使用 LightningChart JS 创建嵌入式散点聊天和添加自定义交互。 此图表将可视化一个 XY 坐标列表以及一个额外的自定义属性，它只是一段文本。这些自定义属性将与 UI 文本元素一起显示，这些元素将与用户的鼠标移动交互。 我们将介绍的突出功能是： 什么是散点图？ 如何创建散点图？ 如何将自定义属性附加到数据点。 如何创建交互式 UI 文本元素。 最终结果 什么是散点图？ 散点图或散点图是..
JavaScript数据可视化编程Flotr
10-07
flotr ，资源分 原本想设置0的，可是不知为何最小是1分，难道改革了么， /小纠结 /小纠结 /小纠结 /小纠结 /小纠结 /小纠结 /小纠结 /小纠结 /小纠结
JavaScript数据可视化编程
02-05
使用JavaScript实现不同常规的可视化 使用FLOTR2进行 数据可视化 编程
flotr2 绘图示例
12-13
Flotr2是一款强大的JavaScript绘图库，用于在网页上创建各种类型的图表，如折线图、柱状图、散点图等。它以其简洁的API和良好的交互性著称，适用于那些希望在网页中集成高质量图形的开发者。Flotr2在不同的浏览器中...
android 调用js flotr2曲线图
07-03
本篇文章将详细介绍如何在Android中调用JavaScript库Flotr2来绘制这些图形。 Flotr2是一个强大的JavaScript图表库，它提供了丰富的图表类型和高度可定制的选项，使得在Web端绘制图表变得简单。在Android应用中，...
Flotr2.zip
05-29
一个JavaScript绘图和制表的图形类库，可以有效地帮助你绘制基于HTML5的图表和图形，包括线图、柱状图、饼图、气泡图等等，对于浏览器的兼容性...压缩包包含一份Flotr2.js和它的压缩版本Flotr2.min.js。可以放心下载。
D3.js实现散点图和气泡图的方法详解
10-21
将会给大家介绍了另外两种可视化图表，利用D3.js实现散点图和气泡图，文章通过多个方面介绍的非常详细，下面来一起看看吧。
javascript 统计分析专题图
06-23
使用javascript创建更好看，更为用户所接受的网页版专题图。
flotr2.min.js 包 及简单例子
02-24
里面包含flotr2.min.js包及一个简单的小例子，另外附 官方Demo地址
flotr2 js图表控件
12-08
Flotr2 是一个用于绘制 HTML5 图形和图表的开源 JS 库，是 flotr 的分支，但移除了 Prototype 的依赖以及其他方面很多改进。
d3.js 创建散点图
liuyaqi1993的博客
11-09 621
最近学d3，对着书中的例子敲了一遍 散点图 .axis path, .axis line{ fill: none; stroke: black; shape-rendering: crispEdges; }
Learning D3.js(3) 散点图与axis
sjh752422969的专栏
07-22 3262
不同于前面的两个教程，今天的教程是我自己写的，算是复习教程，复习一下之前学到的transition变换效果，及d3.scale.linear(),domain(),range()几个方法。 不过我们会使用一个新的api:axis demo http://www.d3js.cn/demo/bar7.html http://www.d3js.cn/demo/bar8.html
d3.js学习笔记（二）------散点图的显示（比例尺）
MARTIAN的博客
02-03 379
d3.js之散点图 步骤： 1、创建 svg 2、在 svg 中创建数据点 circle 3、用比例尺设置数据点的参数，（注意：给比例尺的范围要添加边距，不然有些点会溢出，无法完整显示） 4、添加文本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia
使用d3.js实现力矩散点图+图例
弹指天下
01-04 5147
首先导入相关js依赖， 然后具体实现： .links line { stroke: #999; stroke-opacity: 0.6; } .nodes circle { stroke: #fff; stroke-width: 1.5px; } .linetext { font-size: 18px ; font-family: SimSun;
html点击散点图的点显示一个文本,javascript – D3.js中的简单散点图示例？
weixin_39643255的博客
06-19 190
这应该让你开始。你可以在http://bl.ocks.org/2595950看到它。// data that you want to plot, I've used separate arrays for x and y valuesvar xdata = [5, 10, 15, 20],ydata = [3, 17, 4, 6];// size and margins for the chart...
使用JavaScript进行数据可视化实战
此外，书中还介绍了Flotr2, Flot, Chronoline.js, Underscore.js和Backbone.js等JavaScript库，帮助读者充分利用这些工具来提升可视化效果和性能。书中的步骤式示例和实践项目将引导读者逐步构建自己的数据可视化...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值