功能说明:

1、当鼠标移入饼图块时,该块位置发生偏移。

2、鼠标离开后,该块回复到原来位置。

先看效果图:

实现技巧: 1、计算鼠标所在块的偏移角度。 从上图中可以看出:在javafx中,第一个数据块的位置从0开始,按逆时针方向一次排列。 因此数据块的偏移角度为,它之前所有数据块的角度之和,再加上本身所占角度的一半。
2、数据块角度的计算。 可以根据数据块所占数据的百分比计算对应的角度。 参考以下代码:

    private static double calcAngle(PieChart.Data d) {double total = 0;for (PieChart.Data tmp : d.getChart().getData()) {total += tmp.getPieValue();}return 360 * (d.getPieValue() / total);}

3、注意y坐标的计算,由于fx的y轴和直角坐标系相反,所以移动y坐标要取反。

全部源码:

public class PieChartSample extends Application {@Overridepublic void start(Stage primaryStage) {BorderPane p = new BorderPane();ObservableList pieChartData = FXCollections.observableArrayList(new PieChart.Data("Austria", 8_430_558),new PieChart.Data("Swiss", 7_701_900),new PieChart.Data("Germany", 81_882_342),new PieChart.Data("France", 62_793_432),new PieChart.Data("Spain", 46_661_950),new PieChart.Data("Italy", 60_245_846));PieChart chart = new PieChart(pieChartData);// chart.setStyle("-fx-pie-label-visible: false");for (PieChart.Data d : pieChartData) {d.getNode().setOnMouseEntered(new MouseHoverAnimation(d, chart));d.getNode().setOnMouseExited(new MouseExitAnimation());}chart.setClockwise(false);p.setCenter(chart);Scene s = new Scene(p);primaryStage.setScene(s);primaryStage.setWidth(600);primaryStage.setHeight(600);primaryStage.setTitle("动态饼图");primaryStage.show();}public static void main(String[] args) {launch(args);}static class MouseHoverAnimation implements EventHandler {static final Duration ANIMATION_DURATION = new Duration(500);static final double ANIMATION_DISTANCE = 0.15;private double cos;private double sin;private PieChart chart;public MouseHoverAnimation(PieChart.Data d, PieChart chart) {this.chart = chart;double start = 0;double angle = calcAngle(d);for (PieChart.Data tmp : chart.getData()) {if (tmp == d) {break;}start += calcAngle(tmp);}cos = Math.cos(Math.toRadians(start + angle / 2));sin = Math.sin(Math.toRadians(start + angle / 2));}@Overridepublic void handle(MouseEvent arg0) {Node n = (Node) arg0.getSource();double minX = Double.MAX_VALUE;double maxX = Double.MAX_VALUE * -1;for (PieChart.Data d : chart.getData()) {minX = Math.min(minX, d.getNode().getBoundsInParent().getMinX());maxX = Math.max(maxX, d.getNode().getBoundsInParent().getMaxX());}double radius = maxX - minX;System.out.println("cos:" + cos);System.out.println("sin" + sin);TranslateTransitionBuilder.create().toX((radius * ANIMATION_DISTANCE) * cos).toY((radius * ANIMATION_DISTANCE) * (-sin)).duration(ANIMATION_DURATION).node(n).build().play();}private static double calcAngle(PieChart.Data d) {double total = 0;for (PieChart.Data tmp : d.getChart().getData()) {total += tmp.getPieValue();}return 360 * (d.getPieValue() / total);}}static class MouseExitAnimation implements EventHandler {@Overridepublic void handle(MouseEvent event) {TranslateTransitionBuilder.create().toX(0).toY(0).duration(new Duration(500)).node((Node) event.getSource()).build().play();}}
}
<script type="text/javascript" id="gdt-72058698036477044|discuz_22913820_001">
var TencentGDT = TencentGDT || [];
TencentGDT.push(['72058698036477044|discuz_22913820_001',960,90,'graphic']);
(function() { var doc=document, h=doc.getElementsByTagName('head')[0], s=doc.createElement('script'); s.async=true; s.src='http://qzs.qq.com/qzone/biz/res/q.js'; h && h.insertBefore(s,h.firstChild)})();
</script>

javafx饼图特效相关推荐

  1. javafx css样式_使用CSS设置JavaFX饼图样式

    javafx css样式 渲染图表时, JavaFX默认提供某些颜色. 但是,在某些情况下,您想自定义这些颜色. 在此博客文章中,我将使用一个示例来更改JavaFX饼图的颜色,该示例打算在今天下午在2 ...

  2. 使用CSS设置JavaFX饼图样式

    渲染图表时, JavaFX默认提供某些颜色. 但是,在某些情况下,您想自定义这些颜色. 在此博客文章中,我将使用一个示例来更改JavaFX饼图的颜色,该示例打算在今天下午在RMOUG Training ...

  3. JavaFX图表(二)之饼图

    翻译自   JavaFX - 饼图 饼图是将值表示为具有不同颜色的圆的切片.标记这些切片,并且在图表中表示与每个切片对应的值. 以下是一张饼图,描绘了一个实例中各公司的移动销售情况. 在JavaFX中 ...

  4. 报表交付工程师模拟题 ---2

    报表交付工程师模拟题 -2 1: 默认显示全部班级数据 因为后续要关联饼图 查询各个班级数据 直接在sql中默认查全 条件班级select * from stscore where 1=1${if(l ...

  5. (私人收藏)[开发必备]最全Java离线快速查找手册(可查询可学习,带实例)

    https://pan.baidu.com/s/1L54VuFwCdKVnQGVc8vD1TQ nwmj java手册Java 入门教程含有1个附件,如下:java-HelloWorld.gifJav ...

  6. 使用JavaFX控件

    使用JavaFX2.0的控件 (李佳明译自 www.JavaFX.com,原文:Alla Redko/甲骨文高级技术专家) 关于本教程 本教程覆盖了JavaFX API中内置的JavaFX UI控件. ...

  7. 3d饼图 vue_Vue+Echarts构建可视化大数据平台实战项目分享(附源码)(上)

    前言 分享之前我们先来普及一下什么是数据可视化?数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理.数据可视化通俗来说就是:数据的展示.处理和分析.目的是借助于图形化手段,清晰有 ...

  8. Pyecharts:pyecharts(图文+代码)实战(柱状图/条形图/散点图、漏斗图、仪表盘、折线/面积图、水球图、地图、平行坐标系、饼图、极坐标系、雷达图、词云图)之绘制各种吊炸天的图表

    Pyecharts:pyecharts(图文+代码)实战(柱状图/条形图/散点图.漏斗图.仪表盘.折线/面积图.水球图.地图.平行坐标系.饼图.极坐标系.雷达图.词云图)之绘制各种吊炸天的图表 目录 ...

  9. Java自动化邮件中发送图表(四)之javafx Chart

    一.Javafx Chart JavaFX支持各种饼图和XY图表.在XY平面上表示的图表包括AreaChart,BarChart,BubbleChart,LineChart,ScatterChart, ...

最新文章

  1. 漫话:如何给女朋友解释什么是系统可用性?
  2. 计算机二级c语言复习计划,全国计算机等级考试二级C语言考试复习资料与复习计划以与考试要点.doc...
  3. vscode配置问题
  4. vs.net打包生成可执行文件的方法
  5. new和delete创建和销毁二维数组
  6. ×××全功能邮件系统(6)
  7. 计算机组成原理秦磊华 pdf,_计算机组成原理_设计性实践教学模式研究_秦磊华.pdf...
  8. iPhone 4 Cydia使用教程!精选Cydia源!cydia怎么添加源!Cydia源使用方法!越狱后使用cydia全攻略!...
  9. 2008 r2 server sql 中文版补丁_sql server 2008 r2 64位补丁包-sql server 2008 r2 64位sp3补丁 简体中文版 - 河东下载站...
  10. 网络招聘信息的分析与挖掘
  11. kafka报错:Replication factor:larger than available brokers
  12. SQL Server 2019下载及安装详细教程
  13. 邮储银行计算机岗位笔试题,中国邮政储蓄银行各类岗位笔试经验汇总
  14. python二维表转一维表_【习题】一维表转二维表
  15. RabbitMQ的分发机制
  16. 深入理解JVM(程序编译与代码优化篇)
  17. Virtual Box 后台运行虚拟机
  18. 【bitset乱搞】BZOJ3687 简单题
  19. 软件产品登记(双软认证)
  20. python中list常用操作(不包括切片)

热门文章

  1. 支付项目:5、通用型支付系统(1)
  2. 理解超键、候选键、主键概念及关系
  3. nginx配置https访问 生成ssl自签名证书,浏览器直接访问
  4. *3-4 CCF 2014-09-3 字符串匹配
  5. Swift中什么时候不能用 () 代替 Void 来使用
  6. flask装饰器顺序
  7. session如何设置超时时间
  8. Multimedia Standards Introduction——专业术语
  9. java1逻辑运算符作业(16道)
  10. pc控制iphone的软件_太好用了,这个软件可以让你在电脑上自由控制 iPhone和安卓手机!...