个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我使用 JS 库 Raphael 创建了一个饼图。我想为每个扇区分配一些文本，以便当您将鼠标悬停在特定部分上时，我可以在圆圈中间显示文本。所以首先我需要选择圆的特定部分并将其分配为变量并向其添加文本。谁能帮我弄清楚如何选择圆圈中的第一个部分？？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>g·Raphaël Dynamic Pie Chart</title>
<link rel="stylesheet" href="demo.css" media="screen">
<link rel="stylesheet" href="demo-print.css" media="print">
<script src="raphael.js"></script>
<script src="g.raphael.js"></script>
<script src="g.pie.js"></script>
<style type="text/css">
body {
background: #fff;
font: 100.01% "Fontin Sans", Fontin-Sans, "Myriad Pro", "Lucida Grande", "Lucida Sans Unicode", Lucida, Verdana, Helvetica, sans-serif;
color: #000;
margin: 10px 0 0 0;
padding: 0;
text-align: center;
}
#holder {
margin: 0 auto;
width: 640px;
height: 480px;
}
p {
text-align: left;
margin: .5em 2em;
}
</style>
<script>
//BUG FOUND if the user scrolls over where the original sector would be and keeps going in and out of the original region
//the sector keeps getting bigger and bigger....it is tougher to do with a smaller animation time
window.onload = function () {
//creates raphael canvas located at the specified id
var r = Raphael("holder"),
//creates piechart in raphael (x, y, radius) [ amounts which are distributed according to sum ] ??legend?? ??href??
pie = r.piechart(320, 240, 100, [70,20,5,5], { legend: ["%%.%% - Enterprise Users", "IE Users"], legendpos: "southeast", href: ["http://raphaeljs.com", "http://g.raphaeljs.com"]});
//inner circle
innner = r.circle(320,240, 60).attr("fill", "red");
//invisible circle for text
innertext = r.circle(320,240,60).attr({"fill-opacity":"0"});
//writes text at specified location
r.text(320, 100, "Interactive Pie Chart").attr({ font: "20px sans-serif" });
pie.hover(function () {
//if the user tries hovering over while the animation is finishing up in the specified time for the
//animation to last the user will not get the desired effect. this says that the animation is over
//once the function is called again
this.sector.stop();
//describes how big the sector will be when hovered over
this.sector.scale(1.1, 1.1, this.cx, this.cy);
//does the same as above telling the legends to stop and what to do during animation
if (this.label) {
this.label[0].stop();
this.label[0].attr({ r: 7.5 });
this.label[1].attr({ "font-weight": 800 });
}
}, function () {
//tells the selected sector to animate at the given speed and animation type
this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");
//creates the labesls in the legend and describes how they will be animated
if (this.label) {
this.label[0].animate({ r: 5 }, 500, "linear");
this.label[1].attr({ "font-weight": 400 });
}
});
};
</script>
</head>
<body class="raphael" id="g.raphael.dmitry.baranovskiy.com">
<div id="holder"></div>
<p>
Pie chart with legend, hyperlinks on two first sectors and hover effect.
</p>
</body>
</html>
最佳答案
关于javascript - Raphael JS PieChart 选择部分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11677416/
26
4
0
我在饼图上设置了 2 个值。我想为它制作动画。但我想改变动画方式。所有动画都是从右到左的角度。我想做从左到右的角度。如何更改动画方向？ 编辑 1 : 图书馆: MPAndroidChart 编辑 2
在 MPAndroidChart饼图，是否可以在值顶部显示标签？ 最佳答案 您可以定义自定义 CustomPieChartRenderer它是 PieChartRenderer 的子类并覆盖我们感兴趣
我正在使用 Angular 图表(以便在显示图表和其他内容时简化我的生活)。到目前为止，it had been pretty straightforward我能够完美地呈现我的饼图。 HTML:
我们有一个带有饼图的 Activity 页面。目前，每个部分的字体都非常小。 Our pie chart with its small font size 这是我们的代码: package tech.
我想创建一个 Google Pie Chart . 我想要的是在页面首次加载时创建图表的精美动画。我试过的是这样的: google.load("visualization",
我有一个带有复选框和 2 个动画图表的应用程序:饼图和条形图。选中复选框时，将触发向图表添加新数据的方法。当复选框被 *un* 选中时，会触发从图表中删除数据的方法。 当我点击复选框时速度不是很快，一
我试图弄清楚如何获取和更新 JavaFX 中一组动态创建的饼图中的现有数据。这些饼图都保存在 ArrayList 中。第一个任务是弄清楚如何获取该数据。 当我从一组流动数据源动态创建这些饼图时，我无法
我尝试为 PieChart 的每个“切片”显示一个工具提示，与 Chart.js 中的类似: 我找到了this answer基本上试图在相同的框架中实现相同的目标。它有两个赞成票，从其他(已接受的)答
首先要感谢 HighCharts。好吧，我正在 jQuery Mobile 中使用 HighCharts 构建饼图。 我正在显示几个饼图(最多 6 个图表)，这些饼图是根据响应数据在 Ajax 成功回
在我的 Android 应用程序中，我实现了一个 MPAndroidChart 饼图。我正在根据我的要求得到一切。但我无法阻止饼图中的透明颜色。我该如何解决这个问题？ 这是我的示例代码 mCh
我正在使用 MPAndroidChart 库制作饼图。我想用小数显示饼图值。我想保留 % 符号。 This自 MPAndroidChart 版本 3.0.0 发布以来，旧的类似问题的解决方案无效 更新
目前我用的是GITHUB的MPAndroidChart，画饼图显示两行文字，每行颜色不同，字号不同，查了源码，中间的文字是一个字符串对象，尝试使用: PAINT paint = pie_chart.g
当我在 javafx 中构建饼图时，边界线始终为白色。(我可以使用 css 设置默认切片颜色)。如何为边界线设置自定义颜色？ 最佳答案 将一些 CSS 应用于 standard chart sampl
我在尝试获取单击饼图所选切片的值时遇到了很大的麻烦。 文档说: selection_array: An array of selected objects, each one describing a
我正在使用 MPAndroidChart . 我想删除饼图上的百分比值。我怎样才能做到这一点？ 最佳答案 如果不绘制入口值，请调用:pieData.setDrawValues(false) 如果不绘制
得到如下代码: Legend legend = mChart.getLegend(); legend.setLabels(new String[]{"aaaaa", "bbbbb",
这是我的代码: SpannableStringBuilder builder = new SpannableStringBuilder(); SpannableStri
我已经使用 achartengine 实现了一个饼图。饼图的图例显示在图表底部的一行中，如下所示: oA oB oC oD 但我希望图例以多行显示，每行一个标签，如下所示: 一个 B C oD 任何帮
关闭。这个问题需要debugging details .它目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and th
当我将每个部分悬停时，我想显示 pieChart 每个部分的值(不是百分比，而是计算百分比之前的实际值) 这是我的饼图: 我在 Primefaces 的用户指南中没有找到这个选项。 最佳答案 P
我是一名优秀的程序员,十分优秀！