使用 Highcharts 创建饼图
阅读：51
点赞：0
饼图是一种常用的数据可视化方法，用于展示组成或比较的紧凑概述。虽然在某些情况下可能比条形图更难阅读，但对于小型数据集来说，饼图仍然是一个受欢迎的选择。
一、引入 Highcharts CDN
为了使用 Highcharts，我们需要引入相关的脚本文件。
<script src="https://code.highcharts.com/highcharts.js">script>
<script src="https://code.highcharts.com/modules/exporting.js">script>
<script src="https://code.highcharts.com/modules/export-data.js">script>
<script src="https://code.highcharts.com/modules/accessibility.js">script>
这些脚本分别提供了 Highcharts 的核心功能、导出功能、导出数据功能以及无障碍性支持。
二、HTML 文件结构
创建一个 HTML 文件 piechart.html，并在其中添加如下代码：
<figure class="highcharts-figure">
<div id="container">div>
<p class="highcharts-description">
这是一个由 Brahma Prakash Shukla 创建的饼图。
p>
figure>
三、CSS 样式
接下来，创建一个 CSS 文件来美化饼图：
.highcharts-figure,
.highcharts-data-table table {
min-width: 320px;
max-width: 800px;
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;
}
-
.highcharts-figure和.highcharts-data-table table设置图表及其表格的基本样式。 -
.highcharts-data-table caption设置表格标题样式。 -
.highcharts-data-table th设置表格头部单元格样式。 -
.highcharts-data-table td设置表格数据单元格样式。 -
.highcharts-data-table thead tr和.highcharts-data-table tr:nth-child(even)设置表格行背景色。 -
.highcharts-data-table tr:hover设置鼠标悬停效果。 -
input[type="number"]设置输入框宽度。
四、JavaScript 代码
创建一个 JavaScript 文件来展示饼图数据：
Highcharts.chart('container', {
// 图表配置
chart: {
plotBackgroundColor: null, // 背景颜色设为透明
plotBorderWidth: null, // 边框宽度设为0
plotShadow: false, // 不使用阴影
type: 'pie' // 图表类型为饼图
},
// 标题配置
title: {
text: '饼图示例'
},
// 提示信息配置
tooltip: {
pointFormat: '{series.name}: {point.percentage:.1f}%' // 提示信息格式
},
// 可访问性配置
accessibility: {
point: {
valueSuffix: '%' // 值的后缀
}
},
// 绘制选项配置
plotOptions: {
pie: {
allowPointSelect: true, // 允许点选
cursor: 'pointer', // 鼠标指针样式
dataLabels: { // 数据标签配置
enabled: true, // 启用数据标签
format: '{point.name}: {point.percentage:.1f} %' // 数据标签格式
}
}
},
// 数据系列配置
series: [{
name: '品牌',
colorByPoint: true, // 按点分配颜色
data: [ // 数据项
{
name: 'x',
y: 70.67,
sliced: true, // 是否切片
selected: true // 是否选中
},
{
name: 'y',
y: 14.77
},
{
name: 'z',
y: 4.86
},
{
name: 'a',
y: 2.63
},
{
name: 'b',
y: 1.53
},
{
name: 'c',
y: 1.40
},
{
name: 'd',
y: 0.84
},
{
name: 'e',
y: 0.51
},
{
name: 'f',
y: 2.6
}
]
}]
});这段代码配置了一个饼图，展示了不同品牌的市场份额，并且设置了数据标签以方便阅读。
.png)
五、另一个饼图示例
下面是一个更简单的示例，演示如何使用 jQuery 和 Highcharts 创建一个饼图。
<html>
<head>
<title>另一个饼图示例title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">script>
<script src="https://code.highcharts.com/highcharts.js">script>
head>
<body>
<div id="container" style="width: 600px; height: 450px; margin: 0 auto">div>
<script>
$(document).ready(function() {
var chart = {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
};
var title = {
text: '基础饼图示例'
};
var tooltip = {
pointFormat: '{series.name}: {point.percentage:.1f}%'
};
var plotOptions = {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name}%: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) ||
'black'
}
}
}
};
var series = [{
type: 'pie',
name: '基础示例',
data: [
['A', 45.0],
['B', 26.8],
{
name: 'C',
y: 12.8,
sliced: true,
selected: true
},
['D', 8.5],
['E', 6.2],
['F', 0.7]
]
}];
var json = {};
json.chart = chart;
json.title = title;
json.tooltip = tooltip;
json.series = series;
json.plotOptions = plotOptions;
$('#container').highcharts(json);
});
script>
body>
html>
.png)
这个示例通过 jQuery 初始化 Highcharts，并展示了基本的数据系列和配置选项。
通过以上的步骤，你应该能够创建出自己的饼图，并对其进行个性化定制。希望这篇文章能帮助你在实际项目中更好地应用 Highcharts。