【D3.JS数据可视化实战记录】绘制条形图

最新推荐文章于 2024-05-03 18:08:38 发布

追风筝的MM豆

最新推荐文章于 2024-05-03 18:08:38 发布

阅读量4k

点赞数 1

分类专栏：数据可视化文章标签：数据可视化 d3.js

本文链接：https://blog.csdn.net/lei_miaomiao/article/details/39993663

版权

需要展现的JSON:

{"users":[
    {"name":"jane","value":2};
    {"name":"miko","value":1};
    {"name":"jack","value":4};
]}

代码:

<pre name="code" class="html"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>D3 Test</title>

<style>
	.chart rect {
  		fill: steelblue;
	}

	.chart text {
  		fill: white;
 		font: 10px sans-serif;
		text-anchor: end;
	}

	.axis text {
  		font: 10px sans-serif;
  		fill: black;
	}

	.axis path,
	.axis line {
  		fill: none;
  		stroke: #000;
  		shape-rendering: crispEdges;
	}

</style>

</head>
<body>
	<svg class="chart"></svg>
	<script src="http://d3js.org/d3.v3.min.js"  charset="ut