gpt4 book ai didi

javascript - 在 dimple.js 中自定义圆环图的工具提示

转载 作者:行者123 更新时间:2023-11-29 19:35:34 25 4
gpt4 key购买 nike

我希望我的圆环图工具提示看起来像这样:

enter image description here

到目前为止,我已经尝试过基于 http://annapawlicka.com/pretty-charts-with-dimple-js/ 的代码片段

// Handle the hover event - overriding the default behaviour
s.addEventHandler("mouseover", onHover);
// Handle the leave event - overriding the default behaviour
s.addEventHandler("mouseleave", onLeave);

myChart.draw();

function onHover(e) {
// Get the properties of the selected shape
var cx = parseFloat(e.selectedShape.attr("x")),
cy = parseFloat(e.selectedShape.attr("y"));

// Set the size and position of the popup
var width = 150,
height = 70,
x = (cx + width + 10 < svg.attr("width") ?
cx + 10 :
cx - width - 20);
y = (cy - height / 2 < 0 ?
15 :
cy - height / 2);

// Create a group for the popup objects
popup = svg.append("g");

// Add a rectangle surrounding the text
popup
.append("rect")
.attr("x",5)
.attr("y",5)
.attr("width", 100)
.attr("height", 20)
.attr("rx", 5)
.attr("ry", 5)
.style("fill", 'white')
.style("stroke", 'black')
.style("stroke-width", 2);


// Add multiple lines of text
popup
.append('text')
.attr('x', 17)
.attr('y', 17)
.text(e.seriesValue[0])
.style("font-family", "sans-serif")
.style("font-size", 10);
}

function onLeave(e) {
// Remove the popup
if (popup !== null) {
popup.remove();
}
}

我在获取所选形状的位置时遇到问题,因为这部分代码似乎不适用于圆环图。

var cx = parseFloat(e.selectedShape.attr("x")),
cy = parseFloat(e.selectedShape.attr("y"));

这就是我不使用 cx 或 cy 的原因,因为我得到的是 NaN。其余代码似乎工作正常,我可以编辑文本、文本颜色、背景和其他一些东西。

我想知道如何获得悬停形状的位置,如果可能(我想我要求太多......),获得矩形工具提示的箭头形式(无论它叫什么)。

最佳答案

Here 是 John 指出的使用 d3 的解决方案。

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>   

JS

var path = e.selectedShape[0][0];

var d3path = d3.select(path);

var box = d3path.node().getBBox();

关于javascript - 在 dimple.js 中自定义圆环图的工具提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25271712/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com