The vertical histogram is drawn on the basis of the horizontal bar chart.
1.html Code
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8" /> <title></title> </Head> <Body> <DivID= "Container"></Div> </Body> <Scripttype= "Text/javascript"src= "Js/d3.js" ></Script> <Scripttype= "Text/javascript"src= "Js/shuzhuangtu.js" ></Script></HTML>
2.js Code
vardata = [1,3,4,6,2,9,7,3,8],bar_width= 50, Bar_padding= 10, Svg_height= 500, Svg_width= (Bar_width +bar_padding) *data.length;varScale =d3.scale.linear (). Domain ([0, D3.max (data)]). Range ([Svg_height,0]);varSVG = D3.select ("#container"). Append ("SVG"). attr ("Width", Svg_width). attr ("Height", Svg_height)varBar = Svg.selectall ("G"). Data (data). Enter (). Append ("G"). attr ("Transform",function(d, I) {return"Translate (" +i* (bar_width+bar_padding) + ", 0)"}) Bar.append ("Rect"). attr ({"Y":function(d) {returnScale (d);},"Width": Bar_width,"Height":function(d) {returnsvg_height-Scale (d);}}). Style ("Fill", "Cornflowerblue") Bar.append ("Text"). Text (function(d) {returnD;}). attr ({"Y":function(d) {returnScale (d)},"X": Bar_width/2, "dy": 15, "Text-anchor": "Middle"})
3. Operation effect
Draw a chart with D3 (6)--Vertical bar chart
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
