根据 c3 条形图的坐标对齐外部元素

Question

我正在尝试在 c3 条形图上叠加。我已经知道了条形的坐标以及我希望放置一些自定义 DOM 元素的位置，但我运行遇到的问题是它确实与条形正确对齐。

这是我尝试的一个 jsfiddle。

var label = document.createElement("p");
var text = document.createTextNode("This is 0");
label.style.top = chart.internal.height - chart.internal.x(0) + "px"
label.style.position = "relative";
label.appendChild(text);
document.getElementById("chart").appendChild(label);

http://jsfiddle.net/cjrobinson/thuwbL96/

Answer 1

只需要 absolute 定位而不是 relative，之后你必须将其调整几个像素以使其在栏中垂直居中

http://jsfiddle.net/thuwbL96/7/

根据 c3 条形图的坐标对齐外部元素

Aligning external elements based on coordinates from a c3 bar chart

html

javascript

positioning

c3.js