AmCharts4响应式标签调整

Question

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

我找不到一种在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';

这就是我想要的文本的行为方式，字体采用相同的比例。

​

​

Answer 1

我找到了一个解决方案。关键是当图表改变大小时缩放标签。文档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;
});