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>

效果图

posted @ 2024-05-30 10:20 DogLeftover 阅读(9) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 饼图(一)

· amCharts绘制饼图

· Highcharts之基础饼图案例实现

· echarts之带图片的饼图

· echarts 画一个自定义饼图

阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」

历史上的今天：
2021-05-30 spring boot纯注解开发模板

Highcharts绘制饼图

我的标签

合集 (4)

随笔分类 (1350)

阅读排行榜

推荐排行榜

	<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>