vue使用d3数据可视化(柱状图、饼图、折线图 带坐标轴）
2024-05-26 10:40:06
1.安装依赖
npm install d3 --save-dev
2.页面中引入
<template>
</template><script>import * as d3 from 'd3';
</script>
3.使用
1) 矩形
<template>
</template><script>import * as d3 from 'd3';
export default {data() {return {data: []}},created() {this.setSvg()},methods: {setSvg() {var dataset = [10,50,20,80,90,20,40,60,10,100]; //数据（表示矩形的宽度）var width = 750; //画布的宽度var height = 900; //画布的高度var svg = d3.select("body") //选择文档中的body元素.append("svg") //添加一个svg元素.attr("width", width) //设定宽度.attr("height", height); //设定高度// 矩形开始d3.select('svg').append('rect').attr('x', 300).attr('width', 100).attr('height', 100).attr('fill', 'red').attr('stroke', 'blue')// 矩形结束}}
}
</script> <style>
</style>
2) 圆
<template>
</template><script>
import * as d3 from 'd3';
export default {data() {return {data: []}},created() {this.setSvg()},methods: {setSvg() {var dataset = [10,50,20,80,90,20,40,60,10,100]; //数据（表示矩形的宽度）var width = 750; //画布的宽度var height = 900; //画布的高度var svg = d3.select("body") //选择文档中的body元素.append("svg") //添加一个svg元素.attr("width", width) //设定宽度.attr("height", height); //设定高度// 圆开始const svgWrap = d3.select('svg').append('circle')const circle = d3.select('circle').attr('cx', 600).attr('cy', 100).attr('r', 100).attr('fill', 'skyblue').attr('stroke', 'black')// 圆开始}}
}
</script> <style>
</style>
3) 简单的柱状图
<template>
</template><script>import * as d3 from 'd3';
export default {data() {return {data: []}},created() {this.setSvg()},methods: {setSvg() {var dataset = [10,50,20,80,90,20,40,60,10,100]; //数据（表示矩形的宽度）var width = 750; //画布的宽度var height = 900; //画布的高度var svg = d3.select("body") //选择文档中的body元素.append("svg") //添加一个svg元素.attr("width", width) //设定宽度.attr("height", height); //设定高度var rectHeight = 25; //每个矩形所占的像素高度(包括空白)var g = svg.append('g') //向svg元素中添加一个g 元素.attr('transform','translate(400,300)') //定义偏移量，也就是圆中心点的位置// 定义颜色var color = d3.schemeCategory10// 柱状图开始svg.selectAll("rect").data(dataset).enter().append("rect").attr("x",20).attr("y",function(d,i){return i * rectHeight + 20;}).attr("width",function(d){return d;}).attr("height",rectHeight-2).attr("fill","steelblue")// 柱状图结束}}
}
</script> <style>
</style>
4) 饼图
<template>
</template><script>import * as d3 from 'd3';
export default {data() {return {data: []}},created() {this.setSvg()},methods: {setSvg() {var dataset = [10,50,20,80,90,20,40,60,10,100]; //数据（表示矩形的宽度）var width = 750; //画布的宽度var height = 900; //画布的高度var svg = d3.select("body") //选择文档中的body元素.append("svg") //添加一个svg元素.attr("width", width) //设定宽度.attr("height", height); //设定高度var rectHeight = 25; //每个矩形所占的像素高度(包括空白)var g = svg.append('g') //向svg元素中添加一个g 元素.attr('transform','translate(400,300)') //定义偏移量，也就是圆中心点的位置// 定义颜色var color = d3.schemeCategory10// 饼图开始var pie = d3.pie();var piedata = pie(dataset);console.log(d3)var arc = d3.arc().innerRadius(60) //圆环起始半径.outerRadius(100) //圆环结束半径;// 定义填充路径 g.selectAll('path').data(piedata) //数据填充.enter() .append('path').attr('d',arc).style('fill', function(d,i){ return color[i]}) //为每个扇形填充不同颜色// 饼图结束 }}
}
</script> <style>
</style>
5) 折线图(可带坐标轴、轴线）
<template>
</template><script>
import * as d3 from 'd3';
export default {data() {return {data: []}},created() {this.setSvg()},methods: {setSvg() {var dataset = [10,50,20,80,90,20,40,60,10,100]; //数据（表示矩形的宽度）var width = 750; //画布的宽度var height = 900; //画布的高度var svg = d3.select("body") //选择文档中的body元素.append("svg") //添加一个svg元素.attr("width", width) //设定宽度.attr("height", height); //设定高度var rectHeight = 25; //每个矩形所占的像素高度(包括空白)var g = svg.append('g') //向svg元素中添加一个g 元素.attr('transform','translate(400,300)') //定义偏移量，也就是圆中心点的位置// 单折线图开始var widthLine = 500,heightLine = 250,margin={left:40,top:60,right:20,bottom:20},g_w = widthLine-margin.left-margin.right,g_h = heightLine-margin.top-margin.bottom;// 定义比例尺var xscale=d3.scaleLinear()//定义了一个类型为（linear）的比例尺.domain([0,dataset.length-1])//定义域,数据的域.range([0,g_w]).nice();//映射域:画布区域 var yscale=d3.scaleLinear().domain([d3.max(dataset), 0]) .range([0,g_h]).nice();// 定义线let line=d3.line().x(function(d,i) {return xscale(i)}).y(function(d) {return yscale(d)});console.log(d3.scale)// 定义坐标轴var xAxis = d3.axisBottom().scale(xscale)// .ticks(Math.floor(dataset.length)) //轴线个数// .tickSize(g_h); // 轴线var yAxis = d3.axisLeft(yscale)// .tickSize(-g_w); // 轴线// 添加y轴var g=d3.select("svg")//此时选中的svg是上面定义的svg及其复加的内容.append("g")//添加g元素.attr("transform","translate(100,500)")//设置偏移量.call(yAxis)// 添加折线g.append('path') .attr('stroke-width', 2).attr('d', line(dataset)).attr('stroke', 'blue').attr('fill', 'none')// 添加x轴var g=d3.select("svg")//此时选中的svg是上面定义的svg及其复加的内容.append("g")//添加g元素.attr("transform","translate(100,670)")//设置偏移量.call(xAxis)}}
}
</script> <style>
</style>
一步步实现的，简单记录下来
vue使用d3数据可视化(柱状图、饼图、折线图 带坐标轴）相关推荐
- vue - vue中使用echart实现柱状图和折线图
vue中使用echart实现柱状图和折线图,所用到的数据会放到最后面,在costRate.js里面: 1,先看效果图 一些重要注释我都写到代码里面了:第一个图柱状图,第二个是折线图 2,代码实现 &l ...
- 数据分析入门之数据可视化(散点图、折线图、饼图、柱状图、直方图)
文章目录 1.散点图 1.1.导入数据 1.2.数据可视化 1.3.设置参数 1.4.自定义样式 1.5.解决中文不能显示 2.折线图 2.1.导入数据 2.2.日期类型转换 2.3.数据可视化 3. ...
- echarts柱状图 饼图 折线图
最近大屏项目里做的 首先看看效果 这几个图 我将其标为七个部分 下方成为echarts1,echarts2往后类推 有需要 可以直接拷贝下方代码 推荐一个朋友最近发我的echarts图形地址 ...
- python画折线图详解-Python数据可视化(一) 绘制折线图和散点图
数据可视化示例 对数据可视化的浅认知 数据可视化是任何数据科学或机器学习的重要组成部分.可视化能将数据以更加直观的方式展现出来,使数据更加客观.更具说服力.同时,也易于发现隐藏在数据中的规律和意义.尤 ...
- python绘制不带颜色曲线图_Python数据可视化库-Matplotlib——折线图，子图绘制
# coding:utf-8 import pandas as pd import numpy as np from matplotlib import pylab as plt # 导入数据可视化库 ...
- [转载] Python数据可视化库-Matplotlib——折线图绘制
参考链接: Python Matplotlib数据可视化 plot折线图 # coding:utf-8 import pandas as pd import numpy as np from matp ...
- Python数据可视化库Matplotlib折线图（一）
今天我们来学习一下python的数据可视化库,Matplotlib,是一个Python的2D绘图库 通过这个库,开发者可以仅需要几行代码,便可以生成绘图,直方图,功率图,条形图,错误图,散点图等等 废 ...
- 【Plotly】python数据可视化神器——绘制折线图
Plotly简介 Plotly是用于机器学习.数据挖掘等领域的数据可视化包. 其图标视觉效果简洁大气,可互动性强,成为我工作中进行数据可视化的一大利器,接下来我们就从最简单的折线图,带领大家逐渐入门p ...
- python画曲线图例-Python数据可视化之Matplotlib(折线图)
一.使用Matplotlib生成数据图:是Python上的一个2D绘图库,它可以在跨平台上边出很多高质量的图像. 1.Pycharm安装Matplotlib库 (1)点击菜单上的"file& ...
最新文章
- 有一群少年班的好朋友是什么感觉？快快快快快快疯掉了！
- Js 向json对象中添加新元素
- 东南大学校内智能车竞赛
- jsp 内置的对象的简要概述（转）
- python编辑器_推荐一款Python编辑器，集Pycharm和Sublime优点于一身的王者
- 用行为树的方式思考问题
- 神秘买家6亿元拍走，乐视大厦究竟归谁？
- Android基础(四) Fragment Part 1
- Python学习：day21正则表达式
- c语言的简单程序设计实验报告,工程学院C语言程序设计实验报告
- c#使用SHA256算法实现对文件的加密和解密
- cocos2dx+lua注册事件函数详解 事件
- 购入计算机主机怎么入账,出纳记账软件更换主机电脑时如何备份附件资料？
- ol4服务器连接不稳定,红警Online频繁掉线怎么办 总是断开链接问题解答
- 【Python】Scrapy爬虫介绍requests爬虫移植到Scrapy爬虫
- graphics库的使用
- php gtk不更新了,[新人求助] gtk控件动态更新
- 国内智能手表行业数据浅析
- Arduino 中断程序运行及注意事项
- wps 流程图 跨页_流程图跨页(wps流程图怎么制作)