D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
Xychen1994
Full window
Github gist
stack bar chart
Built with
blockbuilder.org
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>D3 Page Template</title> <script src="https://d3js.org/d3.v4.min.js"></script> </head> <body> <style> .axis path, .axis line{ fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 11px; } </style> <script type="text/javascript"> // Your beautiful D3 code will go here var width = 700; //画布的宽度 var height = 700; //画布的高度 var svg = d3.select("body") //选择文档中的body元素 .append("svg") //添加一个svg元素 .attr("width", width) //设定宽度 .attr("height", height); //设定高度 var padding = {left:45, right:40, top:25, bottom:20}; d3.csv("file1.csv",function(csvdata) { var dataset_Ft = [] var dateset_All = [] var dataset_Total = [] var employee = [] for (var i = 0; i < csvdata.length - 3; i++) { dataset_Ft.push(csvdata[i].Earnings_FT) dataset_All.push(csvdata[i].Earnings_All) dataset_Total.push( + csvdata[i].Earnings_All + csvdata[i].Earnings_FT) employee.push(csvdata[i].Highest_level_completed) } var xScale = d3.scaleBand() .domain(employee) .range([0, width - padding.left - padding.right]) var yScale = d3.scaleLinear() .domain([0,d3.max(dataset.Total)]) .range([height - padding.top - padding.bottom, 0]); }); </script> </body> </html>
https://d3js.org/d3.v4.min.js