Блог

Я пытаюсь создать датчик с одной меткой, которая может быть выбрана пользователем при нажатии на диапазон. Размер самой метки должен совпадать с размером остальной части диаграммы.

Я не могу найти способ сделать это в 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';
  

Я хочу, чтобы текст вел себя так, чтобы шрифт занимал то же соотношение.

Я нашел решение. Ключевым моментом является масштабирование метки при изменении размера диаграммы. Демонстрация была предоставлена в документах 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;
});