我正在使用 Amchart V4 中的“可变半径雷达”。我想在类别名称悬停时显示工具提示,但找不到任何解决方案。工具提示是必需的,因为名称可能很长。在图表上,我打算只显示类别的前 10 个字符。工具提示将具有全名。
在 https://codepen.io/pzombade/pen/RExzbj?editors=0010 上创建了一个页面
编码:
var chart = am4core.create("chartdiv", am4charts.RadarChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
var label = chart.createChild(am4core.Label);
label.text = "Drag slider to change radius";
label.exportable = false;
chart.data = [
{
category: "One",
value1: 8,
value2: 2,
value3: 4,
value4: 3
},
{
category: "Two",
value1: 11,
value2: 4,
value3: 2,
value4: 4
},
{
category: "Three",
value1: 7,
value2: 6,
value3: 6,
value4: 2
},
{
category: "Four",
value1: 13,
value2: 8,
value3: 3,
value4: 2
}
];
chart.radius = am4core.percent(95);
chart.startAngle = 270 - 180;
chart.endAngle = 270 + 180;
chart.innerRadius = am4core.percent(60);
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.labels.template.location = 0.5;
categoryAxis.renderer.grid.template.strokeOpacity = 0.1;
categoryAxis.renderer.axisFills.template.disabled = true;
categoryAxis.mouseEnabled = true;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = false;
valueAxis.renderer.grid.template.strokeOpacity = 0.05;
valueAxis.renderer.axisFills.template.disabled = true;
valueAxis.renderer.axisAngle = 260;
valueAxis.renderer.labels.template.horizontalCenter = "right";
valueAxis.min = 0;
var series1 = chart.series.push(new am4charts.RadarColumnSeries());
series1.columns.template.radarColumn.strokeOpacity = 1;
series1.name = "Series 1";
series1.dataFields.categoryX = "category";
series1.columns.template.tooltipText = "{name}: {valueY.value}";
series1.dataFields.valueY = "value1";
series1.stacked = true;
var series2 = chart.series.push(new am4charts.RadarColumnSeries());
series2.columns.template.radarColumn.strokeOpacity = 1;
series2.columns.template.tooltipText = "{name}: {valueY.value}";
series2.name = "Series 2";
series2.dataFields.categoryX = "category";
series2.dataFields.valueY = "value2";
series2.stacked = true;
var series3 = chart.series.push(new am4charts.RadarColumnSeries());
series3.columns.template.radarColumn.strokeOpacity = 1;
series3.columns.template.tooltipText = "{name}: {valueY.value}";
series3.name = "Series 3";
series3.dataFields.categoryX = "category";
series3.dataFields.valueY = "value3";
series3.stacked = true;
chart.seriesContainer.zIndex = -1;
var slider = chart.createChild(am4core.Slider);
slider.start = 0.5;
slider.exportable = false;
slider.events.on("rangechanged", () => {
var start = slider.start;
chart.startAngle = 270 - start * 179 - 1;
chart.endAngle = 270 + start * 179 + 1;
valueAxis.renderer.axisAngle = chart.startAngle;
});
最佳答案
为 tooltipText
提供非空字符串/值时启用工具提示在正确的地方。在这种情况下,将其设置在轴标签上将触发悬停时的轴工具提示(这与其他工具提示略有不同,例如,默认情况下它是黑色并紧贴周边或在这种情况下是图表的圆周):
categoryAxis.renderer.labels.template.tooltipText = "{category}";
要 chop 轴标签的文本,您可以使用 adapter在其
textOutput
(在 text
上这样做会为您提供 "{category}"
用于实际生成的标签,这在这种情况下不是很有用):var categoryCharacterLimit = 10;
categoryAxis.renderer.labels.template.adapter.add("textOutput", function(text) {
if (text && text.length > categoryCharacterLimit) {
return text.substr(0, categoryCharacterLimit) + "\u2026"; // unicode for ellipsis
}
return text;
});
鉴于默认情况下轴工具提示将与其文本一样宽,这里有一个快速修复来限制其宽度、换行和居中其文本:
categoryAxis.tooltip.maxWidth = 200;
categoryAxis.tooltip.label.wrap = true;
categoryAxis.tooltip.label.textAlign = "middle";
如果您不希望工具提示显示已经足够短的轴标签(请参阅下面我的演示中的“One”),您也可以在那里设置一个适配器,以返回一个空字符串(
""
) (如果有文本,则工具提示会触发,当重置为空字符串时,不再满足触发条件):categoryAxis.tooltip.label.adapter.add("textOutput", function(text) {
if (text && text.length <= categoryCharacterLimit) {
return "";
}
return text;
});
这是一个将所有内容放在一起的演示:
https://codepen.io/team/amcharts/pen/64e5da963cc3822fc95bac15a8f56b09
如果您需要自定义轴工具提示的外观,这里有一些附加信息:
https://www.amcharts.com/docs/v4/concepts/axes/axis-tooltips/#Modifying_tooltip_appearance
https://www.amcharts.com/docs/v4/concepts/series/#Tooltip_colors
关于javascript - 是否可以使用 Amchart v4 在类别名称上显示工具提示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54017586/