如何在带右侧垂直图例的amCharts5图表中设置标题

你可以通过两种方式添加标题，根据需求选择：

方式一：给图表本身添加内部标题 #

直接在图表容器内添加标题文本，标题会跟随图表的内边距调整位置：

// Create wrapper container
var container = root.container.children.push(
  am5.Container.new(root, {
    width: am5.p100,
    height: am5.p100,
    layout: root.horizontalLayout
  })
);
// Create venn series
var chart = container.children.push(
  am5venn.Venn.new(root, {
    categoryField: "name",
    valueField: "count",
    intersectionsField: "sets",
    paddingTop: 60, // 增大顶部内边距，给标题留出空间
    paddingBottom: 40,
    paddingLeft: 40,
    paddingRight: 40
  })
);

// --- 添加图表顶部标题 ---
var chartTitle = chart.children.push(am5.Label.new(root, {
  text: "韦恩图标题",
  fontSize: 20,
  fontWeight: "bold",
  x: am5.p50,
  centerX: am5.p50,
  y: 10 // 距离图表顶部的偏移量
}));

// Set data
chart.data.setAll(x.data);
// Add legend
var legend = container.children.push(
  am5.Legend.new(root, {
    layout: root.verticalLayout,
    centerX: am5.p100,
    x: am5.p100,
    centerY: am5.p50,
    y: am5.p50
  })
);
legend.data.setAll(chart.dataItems);

方式二：添加全局顶部/底部标题 #

创建外层垂直容器，将标题和原图表+图例容器并列布局，标题会位于整个可视化区域的顶部或底部：

// 创建外层垂直容器
var outerContainer = root.container.children.push(
  am5.Container.new(root, {
    width: am5.p100,
    height: am5.p100,
    layout: root.verticalLayout
  })
);

// --- 添加全局顶部标题 ---
var globalTitle = outerContainer.children.push(am5.Label.new(root, {
  text: "全局顶部标题",
  fontSize: 20,
  fontWeight: "bold",
  x: am5.p50,
  centerX: am5.p50,
  paddingBottom: 15 // 标题和下方图表的间距
}));

// 原图表+图例容器
var container = outerContainer.children.push(
  am5.Container.new(root, {
    width: am5.p100,
    height: am5.p90, // 留出标题占用的高度
    layout: root.horizontalLayout
  })
);

// Create venn series
var chart = container.children.push(
  am5venn.Venn.new(root, {
    categoryField: "name",
    valueField: "count",
    intersectionsField: "sets",
    paddingTop: 40,
    paddingBottom: 40,
    paddingLeft: 40,
    paddingRight: 40
  })
);
// Set data
chart.data.setAll(x.data);
// Add legend
var legend = container.children.push(
  am5.Legend.new(root, {
    layout: root.verticalLayout,
    centerX: am5.p100,
    x: am5.p100,
    centerY: am5.p50,
    y: am5.p50
  })
);
legend.data.setAll(chart.dataItems);

// --- 如需添加底部标题，在outerContainer最后添加 ---
var bottomTitle = outerContainer.children.push(am5.Label.new(root, {
  text: "底部标题",
  fontSize: 16,
  x: am5.p50,
  centerX: am5.p50,
  paddingTop: 10
}));

你可以根据需求调整标题的字体大小、粗细、位置偏移和间距，两种方式分别适用于标题跟随图表、标题独立于图表的场景。

内容的提问来源于stack exchange，提问作者Stéphane Laurent