时间戳

首页 > 解决方案 > AmCharts4 响应式标签尺寸

label - AmCharts4 响应式标签尺寸

问题描述

我正在尝试创建一个具有单个标签的仪表，用户可以在单击范围时选择该标签。标签本身应与图表的其余部分保持一致的大小。

我在 AmCharts4 中找不到本地执行此操作的方法，但想知道它是否可以与此处的解决方案结合使用https://css-tricks.com/fitting-text-to-a-container/#just-use- svg

https://codepen.io/ChazUK/pen/ExyJdzY

const label = chart.radarContainer.createChild(am4core.Label);
label.isMeasured = false;
label.fontSize = '2rem';
label.x = am4core.percent(50);
label.horizontalCenter = 'middle';
label.verticalCenter = 'bottom';

这就是我希望文本的行为方式，字体占据相同的比例。

标签： labelresponsiveamchartsfont-sizeamcharts4

解决方案

我找到了解决方案。当图表改变大小时，关键是缩放标签。文档https://www.amcharts.com/docs/v4/tutorials/automatically-resize-label-to-fit-donut-inner-radius/中提供了一个演示，但这使得字体适合宽度而不是保持一致的大小，因此比例需要与高度而不是宽度相关联。

const chart = am4core.create('chart', am4charts.GaugeChart);

...

/*
 * Create Container to hold responsive label
 * Height dictates the font size
 */
const container = chart.createChild(am4core.Container);
container.horizontalCenter = 'middle';
container.verticalCenter = 'bottom';
container.height = am4core.percent(20);
container.x = am4core.percent(50);
container.y = am4core.percent(100);
container.isMeasured = false;

/*
 * Create the label as a child of container
 */
const label = container.createChild(am4core.Label);
label.horizontalCenter = 'middle';
label.verticalCenter = 'bottom';
label.x = am4core.percent(50);
label.y = am4core.percent(100);
label.fontSize = 30; // irrelevant, can be omitted
label.text = 'Auto sizing text';

/*
 * Update the scale of the label on the
 * sizechanged event
 */
chart.events.on('sizechanged', () => {
  label.scale = container.bbox.height / this.label.bbox.height;
});

推荐阅读