在AMCharts 4中,您可以通过编程方式突出显示列,以下是具体步骤:
let chart = am4core.create("chartdiv", am4charts.XYChart);
chart.paddingRight = 20;
let series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "value";
series.dataFields.categoryX = "category";
series.columns.template.width = am4core.percent(50);
在以上代码中,您需要将"value"替换为您的数据集中表示值的字段名称,将"category"替换为表示类别的字段名称。
let highlightState = series.columns.template.states.create("highlight");
highlightState.properties.fill = am4core.color("#FF5722");
在以上代码中,我们为列的"highlight"状态设置了填充颜色为"#FF5722",您可以根据需要自定义填充颜色。
series.columns.template.events.on("over", function (event) {
event.target.setState("highlight");
});
series.columns.template.events.on("out", function (event) {
event.target.setState("default");
});
在以上代码中,当鼠标悬停在柱状图上时,我们将列的状态设置为"highlight",当鼠标移出时,将状态设置为"default"。
完整示例代码及演示效果可以参考腾讯云提供的AMCharts 4官方文档链接地址: AMCharts 4 官方文档
腾讯云也提供了适用于Web开发的云服务器、云函数、云数据库等多种云计算相关产品,您可以根据具体需求选择相应的产品。
领取专属 10元无门槛券
手把手带您无忧上云