Highcharts绘制饼图
-
代码案例
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Highcharts Example</title> <style type="text/css"> .highcharts-figure, .highcharts-data-table table { min-width: 320px; max-width: 500px; margin: 1em auto; } .highcharts-data-table table { font-family: Verdana, sans-serif; border-collapse: collapse; border: 1px solid #ebebeb; margin: 10px auto; text-align: center; width: 100%; max-width: 500px; } .highcharts-data-table caption { padding: 1em 0; font-size: 1.2em; color: #555; } .highcharts-data-table th { font-weight: 600; padding: 0.5em; } .highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption { padding: 0.5em; } .highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) { background: #f8f8f8; } .highcharts-data-table tr:hover { background: #f1f7ff; } input[type="number"] { min-width: 50px; } </style> </head> <body> <script src="../../code/highcharts.js"></script> <script src="../../code/modules/exporting.js"></script> <script src="../../code/modules/accessibility.js"></script> <figure class="highcharts-figure"> <div id="container"></div> <!-- <p class="highcharts-description"> Pie charts are very popular for showing a compact overview of a composition or comparison. While they can be harder to read than column charts, they remain a popular choice for small datasets. </p> --> </figure> <script type="text/javascript"> Highcharts.chart('container', { chart: { type: 'pie' }, title: { text: 'Egg Yolk Composition' }, tooltip: { valueSuffix: '%' }, subtitle: { text: 'Source:<a href="https://www.mdpi.com/2072-6643/11/3/684/htm" target="_default">MDPI</a>' }, plotOptions: { series: { allowPointSelect: true, cursor: 'pointer', dataLabels: [{ enabled: true, distance: 20 }, { enabled: true, distance: -40, format: '{point.percentage:.1f}%', style: { fontSize: '1.2em', textOutline: 'none', opacity: 0.7 }, filter: { operator: '>', property: 'percentage', value: 10 } }] } }, series: [ { name: 'Percentage', colorByPoint: true, data: [ { name: 'Water', y: 55.02 }, { name: 'Fat', sliced: true, selected: true, y: 26.71 }, { name: 'Carbohydrates', y: 1.09 }, { name: 'Protein', y: 15.5 }, { name: 'Ash', y: 1.68 } ] } ] }); </script> </body> </html>
- 效果图
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
2021-05-30 spring boot纯注解开发模板