如何解决使用scala.js创建BarChart
我正在尝试使用scala-js-d3创建条形图。
问题在于标题中没有标题,只有下划线可见。酒吧根本没有文字。
BarChart已呈现,并且在开发人员工具的控制台中没有问题。
以下是所用代码的示例:
val graphHeight = 450
//The width of each bar.
val barWidth = 80
//The distance between each bar.
val barSeparation = 10
//The actual horizontal distance from drawing one bar rectangle to drawing the next.
val horizontalBarDistance = barWidth + barSeparation
//The value to multiply each bar's value by to get its height.
val barHeightMultiplier = graphHeight / maxData;
//Color for start
val color = d3.rgb("DarkSlateBlue")
//val my_data = js.Array(8,22,31,36,48,17,25)
val rectXFun = (d: Int,i: Int) => i * horizontalBarDistance
val rectYFun = (d: Int) => graphHeight - d * barHeightMultiplier
val rectXFun2 = (d: Int,i: Int) => i * horizontalBarDistance +5
val rectYFun2 = (d: Int) => graphHeight - d * barHeightMultiplier +15
val rectHeightFun = (d: Int) => d * barHeightMultiplier
val rectColorFun = (d: Int,i: Int) => color.brighter(i * 0.5).toString
val remove_element = d3.select("#"+currContainer).select("svg").remove()
val svg = d3.select("#"+currContainer).append("svg").attr("width","100%").attr("height","450px")
val sel = svg.selectAll("rect").data(my_data)
val data_enter = sel.enter()
val sel2 = data_enter
.append("rect")
.attr("x",rectXFun)
.attr("y",rectYFun)
.attr("width",barWidth)
.attr("height",rectHeightFun)
.style("fill",rectColorFun)
//.style("fill","black")
val textXOffset = horizontalBarDistance / 2 - 12
val textYOffset = 20
val textYPosition = graphHeight + textYOffset;
//Draw the text.
data_enter.append("text").text((d: Int) => d.toString)
.attr("x",(d: Int,i: Int) => i * horizontalBarDistance + textXOffset)
.attr("y",textYPosition)
.style("text-decoration","underline")
.style("fill","black")
.style("font-size","16px")
svg.append("text")
//.attr("x",(width / 2))
//.attr("y",0 - (margin.top / 2))
.text("Graph Title")
.attr("text-anchor","middle")
.style("font-size","16px")
.style("text-decoration","blue")
.style("color","blue")
解决方法
我必须为示例创建轴。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。