以下是一个使用Amcharts4库,在图例悬停时突出显示线系列的代码示例:
首先,确保已经导入Amcharts4库的脚本文件:
接下来,创建一个包含线图的div元素:
然后,在JavaScript代码中,使用Amcharts4创建图表对象并配置图表选项:
// 创建图表对象
var chart = am4core.create("chartdiv", am4charts.XYChart);
// 设置图表主题
chart.theme = am4themes_animated;
// 创建一个数据集
var data = [{
"date": "2019-01-01",
"value": 100
}, {
"date": "2019-01-02",
"value": 150
}, {
"date": "2019-01-03",
"value": 200
}, {
"date": "2019-01-04",
"value": 250
}, {
"date": "2019-01-05",
"value": 300
}];
// 将数据集分配给图表
chart.data = data;
// 创建一个x轴
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
// 创建一个y轴
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// 创建一个线系列
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "value";
series.dataFields.dateX = "date";
series.strokeWidth = 2;
series.tooltipText = "{value}";
// 添加图例
chart.legend = new am4charts.Legend();
chart.legend.markers.template.width = 15;
chart.legend.markers.template.height = 15;
// 图例项悬停事件处理函数
function handleLegendOver(event) {
var dataItem = event.target.dataItem;
if (!dataItem.isActive) {
series.strokeOpacity = 0.2;
dataItem.strokeOpacity = 1;
dataItem.strokeDasharray = "3,3";
}
}
// 图例项离开事件处理函数
function handleLegendOut(event) {
var dataItem = event.target.dataItem;
series.strokeOpacity = 1;
dataItem.strokeOpacity = 1;
dataItem.strokeDasharray = "none";
}
// 监听图例项悬停和离开事件
chart.legend.itemContainers.template.events.on("over", handleLegendOver);
chart.legend.itemContainers.template.events.on("out", handleLegendOut);
在上述代码中,我们首先创建一个图表对象,并将数据集分配给图表。然后,我们创建一个线系列,并为它设置一些属性,比如线宽和提示文本。接下来,我们添加一个图例,并为图例项的悬停和离开事件定义处理函数。在处理函数中,我们根据鼠标事件的目标对象,设置线系列的透明度和虚线样式,以突出显示或取消突出显示对应的线系列。
最后,我们通过监听图例项的悬停和离开事件,来调用相应的处理函数实现线系列的突出显示效果。
请注意,上述代码仅为示例,具体的实现方式可能会根据您的实际需求有所调整。