带有实际值的饼图 am4charts 图例 - TypeScript

概述

本文主要介绍如何使用 TypeScript 带有实际值的饼图 am4charts 图例。这是一种基于 web 的数据可视化工具，可轻松创建各种类型的图表。

需求

我们要创建一个带有实际值的饼图 am4charts 图例，以展示销售额和利润的比例。此图表应该满足以下需求：

• 饼图应该能够显示每个部分的标签。
• 图例应该包含饼图中每个部分的标签和值。
• 图例应该位于图表下方。

准备工作

为了能够快速创建 am4charts 图表，我们需要引入以下库：

import * as am4core from '@amcharts/amcharts4/core';
import * as am4charts from '@amcharts/amcharts4/charts';
import * as am4themes_animated from '@amcharts/amcharts4/themes/animated';

创建图表

首先，我们需要创建一个容器来容纳我们的图表：

<div id="chartdiv"></div>

接着，我们可以使用以下 TypeScript 代码初始化 am4charts：

am4core.useTheme(am4themes_animated);

let chart = am4core.create('chartdiv', am4charts.PieChart);

chart.data = [{
  'category': '销售额',
  'value': 4500
}, {
  'category': '利润',
  'value': 2500
}];

let series = chart.series.push(new am4charts.PieSeries());

series.dataFields.value = 'value';
series.dataFields.category = 'category';

这将创建一个带有实际值的饼图。此图表包含两个部分：销售额和利润。

添加标签和图例

为了添加标签，我们可以使用以下 TypeScript 代码：

series.labels.template.disabled = true;
series.ticks.template.disabled = true;
series.tooltip.disabled = true;

let label = series.createChild(am4core.Label);
label.text = '4500';
label.horizontalCenter = 'middle';
label.verticalCenter = 'middle';

此代码将在饼图中央添加一个标签，显示销售额的值。

为了添加图例，我们可以使用以下 TypeScript 代码：

chart.legend = new am4charts.Legend();
chart.legend.position = 'bottom';
chart.legend.width = am4core.percent(100);
chart.legend.useDefaultMarker = true;

let markerTemplate = chart.legend.markers.template;
markerTemplate.width = 20;
markerTemplate.height = 20;

这将创建一个位于图表下方的图例。图例中的每个条目都包含一个名称、值和颜色标识。

总结

以上就是使用 TypeScript 创建带有实际值的饼图 am4charts 图例的全部过程。希望这篇文章能对你有所帮助！