使用D3制作统计图表、线性图表、水平柱状图表、饼图 -- （四）水平柱状图表+坐标轴

最新推荐文章于 2024-02-18 09:59:44 发布
最新推荐文章于 2024-02-18 09:59:44 发布
阅读量1k 收藏 1
点赞数
分类专栏： 前端开发 文章标签： d3 统计图 统计图表
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luomao2012/article/details/70527070
版权

index.html(图表页面)

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>D3</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div id="container"></div>
</body>
<script src="https://d3js.org/d3.v3.js"></script>
<script src="index.js"></script>
</html>

index.js(JS代码)

var data = [0,34.45,45.534,556,76,87,234,234]

horizontalShapeWithAxisChart(data,"#container") //D3生成面积图表

/**
 * @desc 水平柱状图表+坐标轴
 */
function horizontalShapeWithAxisChart(data, container) { 
  var width = 600,
  height = 250,
  margin = {left:80, top:30, right:30, bottom:30},
  svg_width = width+margin.left+margin.right,
  svg_height = height+margin.top+margin.bottom

  var scale = d3.scale.linear()
  .domain([0, d3.max(data)])
  .range([height, 0])

  var scale_x = d3.scale.ordinal()
  .domain(data.map(function(d,i){ return i; }))
  .rangeBands([0,width], 0.1)

  //添加svg元素，设置宽度和高度
  var svg = d3.select(container)
  .append("svg:svg")
  .attr("width", svg_width+50)
  .attr("height", svg_height)

  //添加chart元素，平移left和top
  var chart = svg.append("g")
  .attr("transform", "translate("+margin.left+","+margin.top+")")

  //添加X、Y坐标轴
  var x_axis = d3.svg.axis().scale(scale_x),
  y_axis = d3.svg.axis().scale(scale).orient("left")

  chart.append("g")
  .call(x_axis)
  .attr("transform", "translate(0,"+height+")")
  .append("text")
  .attr("transform", "translate("+width+",0)")
  .text("时间(天)")

  chart.append("g")
  .call(y_axis)
  .append("text")
  .text("销售总价(￥)")
  .attr("transform", "translate(-15,-15)")
  //选择所有的g元素，设置平移位置
  var bar = chart.selectAll(".bar")
  .data(data)
  .enter()
  .append("g")
  .attr("class", "bar")
  .attr("transform", function(d, i){ return "translate("+scale_x(i)+",0)";})

  //添加矩阵元素，设置填充宽度高度
  bar.append("rect")
  .attr({
    "y": function(d){ return scale(d); },
    "width": scale_x.rangeBand(),
    "height": function(d){ return height - scale(d); }
  })
  .style("fill", "steelblue")

  //设置图表文字
  bar.append("text")
  .text(function(d){ return d; })
  .attr({
    "y": function(d){ return scale(d); },
    "x": scale_x.rangeBand()/2,
    // "dy": 15 //文字位置
  })
  .style("text-anchor", "middle")
}

后端研发Marion
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
d3Chart：这是一个图表项目，它将使用D3图表库和纯JavaScript来使用D3实现地图和条形图
02-16
d3Chart：这是一个图表项目，它将使用D3图表库和纯JavaScript来使用D3实现地图和条形图
使用D3.js绘制面积图表
xinxiaoyong的博客
06-07 1020
一、先看效果图： 二、代码详情，此代码可以直接在本地运行 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>面积图表</title> <style type="text/css"> #container{ width: 500px; ...
利用 d3.js 绘制柱形图、折线图、散点图、饼图和力导图
weixin_44947339的博客
01-27 1754
下载d3.js文件：https://d3js.org/d3.v5.min.js 柱形图 折线图 散点图 饼图 力导图 一、动态效果柱形图 效果图： 代码： <html><head> <meta charset="utf-8"> <title>带有交互的柱形图</title> <style> ...
前端可视化入门与实战:D3 高级图表实战：柱状图、折线图
sybh的博客
02-18 924
最后，我们总结下这一节的关键知识点。D3 基于 SVG 的数据驱动视图的库，通过链式调用、封装比例尺、数学方法、数据状态的管理等，我们可以轻松绘制复杂的图表。我们的关注点只在数据，不用深入数据背后的调用，修改数据意味着视图会被更新。定义绘图区域 -> scaleBand 用于离散数据，用在 x 轴的比例尺；在 y 轴我们用scaleLinear，生成比例尺 -> 生成坐标轴 -> 通过 rect 生成柱体。
MATLAB绘制多组数据的双轴、三轴、四轴图
Kevin_1999的博客
07-30 1万+
MATLAB自带plotyy函数难以实现对图像轴标、线形等元素的自主定义，且未自带绘制多组数据三、四轴图的函数。因此笔者编写了一系列脚本，实现多组数据的双轴、三轴、四轴图像绘图，并封装成MATLAB函数。扩展轴上的曲线绘制条数亦没有限制。.........
【实战】基于 Vue，使用 D3.js 画一个疫情趋势折线图
前端进阶之路 | 中大厂、外企、国企内推 | 面试培训 | 简历修改
07-28 1560
在过去的两年里，我们看到很多数据可视化基于新冠疫情开展研究工作。 这些可视化图表通过为我们提供有关特定城市/地区病例数的信息，帮助人们更快捷地理解疫情的发展情况。 除此之外，数据可视化也在帮助我们更好地理解数字。 因为视觉本身不是执行复杂的计算，而是帮助人脑更快地感知信息。 此外，与充满数字的电子表格相比，它们看起来也更有趣。...
html如何绘制面积图,Learning D3.js(7) 面积(area)图与缩放查看(1)
weixin_42404983的博客
06-21 423
这一次我们要做一个实用性比较强的图表：带缩略图拖拽查看的面积图。面积图强调数量随时间而变化的程度，是非常常用的可视化图表最终demohttp://www.d3js.cn/demo/brush.html本次的demohttp://www.d3js.cn/demo/brush2.html首先我们观察下效果图上面的效果图是由两个面积图组成的。我们首先要绘制出这两个静态的图表，然后根据d3js提供的强大工...
D3入门教程——做一个简单的图表
苏木的小站
08-18 3678
文章目录一、准备1.什么是画布1）SVG2）Canvas3）两者之前的区别二、开始1.添加画布2.绘制矩形三、完整代码 一、准备 1.什么是画布 HTML 5 提供两种强有力的“画布”：SVG 和 Canvas。 1）SVG SVG 是一种使用 XML 描述 2D 图形的语言。 SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事...
D3基本图表绘制——折线图
m0_63150077的博客
02-02 4695
制作折线图分成4步走： 1.首先划定制图区域和范围——画一个边框 2.数据处理得到绘制折线图需要的数据——绘制折线需要一个数组整体 3.画出x，y轴和折线——y轴绘制需要注意 4.补充标签，调节位置
D3 二维图表的绘制系列（一）介绍
热门推荐
zjw_python的博客
02-20 6万+
1 介绍 D3 (或者叫 D3.js )是一个基于 web 标准的 JavaScript 可视化库. D3 可以借助 SVG, Canvas 以及HTML 将你的数据生动的展现出来. D3 结合了强大的可视化交互技术以及数据驱动 DOM 的技术,让你可以借助于现代浏览器的强大功能自由的对数据进行可视化 学习了d3一个多月，通过绘制一些简单的二维图表，总算入门了d3。强烈推荐《D3数据可视化实战...
D3图表示例-线型图表面型图表柱状图表
12-05
D3图表示例-线型图表面型图表柱状图表
Axure动态图表+折线图+饼图+柱状图
10-28
Axure动态图表+折线图+饼图+柱状图； 饼状图、柱状图、折线图含交互动画； 软件版本：Axure8.1（兼容Axure9、Axure10）
unity统计图表、曲线图表、饼图、柱状图、多边形图、2D、3D
01-18
Embedded Browser 3.1.0
axure 图表 柱状图 饼图 线性图 元件库 组件库
10-06
axure 图表 柱状图 饼图 线性图 元件库 组件库，好用的
Axure数据可视化图表组件库(AxureUX图表+地图)
06-28
一套数据可视化图表通用组件库，主要由Antv静态图表、Axhub动态图表、地图组件素材三部分内容组成，其中包含了几十种常用图表类型和全国34个省级行政区地图，可以满足大部分的原型设计图表展示需求。 Antv静态图表...
wxchart微信小程序图表组件柱状图折线图饼图雷达图
08-10
wxchart 微信小程序，图表组件（柱状图、折线图、饼图、雷达图...）
大学物理册答案上下都有
最新发布
04-26
大学物理册答案上下都有
UWB超宽带信道研究及源码.zip
04-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
ECharts-Java使用Java快速开发ECharts图表
05-18
ECharts-Java是一个基于Java语言的ECharts图表库，它可以帮助Java开发者快速地生成各种类型的ECharts图表，如折线图、柱状图、饼图等。 使用ECharts-Java，你只需要简单地组装好数据，然后调用相应的API即可生成对应的图表。同时，ECharts-Java还提供了多种图表主题和样式，以及丰富的交互效果，可以让你轻松地制作出美观、交互性强的ECharts图表。 下面是一个简单的使用ECharts-Java生成柱状图的示例代码： ```java // 创建柱状图对象 BarChart barChart = new BarChart(); // 设置图表数据 barChart.setData(Arrays.asList(100, 200, 300, 400, 500)); // 设置X轴数据 barChart.setXAxisData(Arrays.asList("A", "B", "C", "D", "E")); // 设置图表标题 barChart.setTitle("柱状图示例"); // 生成图表HTML代码 String chartHtml = barChart.render(); ``` 通过这段代码，我们可以生成一个简单的柱状图，并且可以将其嵌入到网页中显示。 总的来说，ECharts-Java是一个强大且易用的ECharts图表库，可以帮助Java开发者快速地制作各种类型的图表，为数据可视化提供了便利。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值