javascript - 在页面上放置多个 raphael.js 对象

标签 javascript jquery css svg raphael

我是 raphael.js 的新手,想用它制作显示进度百分比的小饼图。我已经准备好绘制图表的功能,如果我在页面上只有一个图表,它会很好地工作。但是,当我添加其他元素时,图表会重叠。我遍历 .min-pie-chart 元素:

$(".min-pie-chart").each(function () {
  var value = $(this).data("percent");
  Raphael($(this), 20, 20).minPieChart(10, 10, 8, value, "rgb(89,185,86)", "rgb(75,175,72)");
});

我猜这是一个 css 问题,对我来说也是新问题。

演示位于here .

感谢任何帮助。

最佳答案

您需要根据某些因素调整其位置。在这种情况下,根据其在列表中的索引调整偏移量可能是有意义的。

您可以从匿名函数中获取索引...

each(function (index) {

然后

minPieChart(30, (index + 1) * 20, 8, value,

举个例子。 jsfiddle

关于javascript - 在页面上放置多个 raphael.js 对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29595747/

相关文章:

javascript - 使用 PHP、拖放操作将排序首选项保存到 MySQL

javascript - 将文件拖过区域时更改拖放区域颜色

javascript - 粘性绝对 DIV 在 IE 和 Safari 中闪烁

javascript - 在完成加载之前如何制作图像,AJAX jQuery

CSS 工具提示背景颜色隐藏

jquery 使 2 列高度相等仅在alert()时有效

css - 使用 flexbox 在移动设备中对齐元素

javascript - 如何在javascript对象中调用jquery事件?

javascript - 如何在 Iframe 中调用外部 Javascript 文件

javascript - 检查值是否在 CSV 文件中