时间戳

首页 > 解决方案 > 如何显示线系列圆形项目符号与Amcharts 4相交的所有工具提示文本？

amcharts4 - 如何显示线系列圆形项目符号与Amcharts 4相交的所有工具提示文本？

问题描述

我正在使用带有 valueX 和 valueY 而不是 categoryX 的 Amcharts4 Line 系列。目前，我可以在子弹/气泡悬停时看到工具提示，但如果它们相互交叉和重叠，我也想查看所有子弹的工具提示。如果我将鼠标悬停在单个子弹/气泡上，它会显示工具提示，但如果您看到红色和绿色线相互交叉，它只会显示绿色子弹/气泡的工具提示，而不是隐藏在其背面的另一个。

单击此处查看带有 ValueX 和 ValueY 的线系列图

这是我的代码，其中我有 3 个系列并为每个项目符号设置一个工具提示：

let series1 = chart.series.push(new am4charts.LineSeries());
        series1.cursorTooltipEnabled = true;
        series1.showTooltipOn = 'hover';
        series1.dataFields.valueY = "compressorCap";
        // series1.dataFields.categoryX = "evapDegC";   // If X-Axis is Category Axis
        series1.dataFields.valueX = "evapDegC";         // If X-Axis is Value Axis
        series1.name = "Compressor capacity";
        let series1toolTip = series1.bullets.push(new am4charts.CircleBullet());
        series1toolTip.tooltipText = "{name} in {valueX}°C => {valueY}";
        series1.tooltip.getFillFromObject = false;
        series1.tooltip.background.fill = am4core.color("#b9a9e6");
        series1.legendSettings.valueText = "{valueY}";
        series1.visible = false;
        series1.stroke = am4core.color("#b9a9e6");

        let series2 = chart.series.push(new am4charts.LineSeries());
        series2.cursorTooltipEnabled = true;
        series2.showTooltipOn = 'hover';
        series2.dataFields.valueY = "evapCoilCap";
        // series2.dataFields.categoryX = "evapDegC";      // If X-Axis is Category Axis
        series2.dataFields.valueX = "evapDegC";         // If X-Axis is Value Axis
        series2.name = 'Evaporator coil capacity';
        let series2toolTip = series2.bullets.push(new am4charts.CircleBullet());
        series2toolTip.tooltipText = "{name} in {valueX}°C => {valueY}";
        series2.tooltip.getFillFromObject = false;
        series2.tooltip.background.fill = am4core.color("red");
        series2.legendSettings.valueText = "{valueY}";
        series2.stroke = am4core.color("red");

        let series3 = chart.series.push(new am4charts.LineSeries());
        series3.cursorTooltipEnabled = true;
        series3.showTooltipOn = 'hover';
        series3.dataFields.valueY = "evapCoilSensibleCap";
        // series3.dataFields.categoryX = "evapDegC";      // If X-Axis is Category Axis
        series3.dataFields.valueX = "evapDegC";      // If X-Axis is Value Axis
        series3.name = 'Evaporator sensible cooling capacity ';
        let series3toolTip = series3.bullets.push(new am4charts.CircleBullet());
        series3toolTip.tooltipText = "{name} in {valueX}°C => {valueY}";
        series3.tooltip.getFillFromObject = false;
        series3.tooltip.background.fill = am4core.color("#13bb37");
        series3.legendSettings.valueText = "{valueY}";
        series3.stroke = am4core.color("#13bb37");

        // Add chart cursor
        chart.cursor = new am4charts.XYCursor();
        chart.cursor.behavior = "zoomY";

标签： amcharts4

解决方案

为了显示多个工具提示，您需要tooltipText直接在系列上设置，而不是在项目符号上。

series.tooltipText = "{name} in {valueX}°C => {valueY}";

不过，这是第一步。由于您使用的是全ValueAxis场景，因此您还需要应用本教程中所述的解决方法。

am4charts.ValueAxis.prototype.getSeriesDataItem = function(series, position) {
  var key = this.axisFieldName + this.axisLetter;
  var value = this.positionToValue(position);
  var dataItem = series.dataItems.getIndex(series.dataItems.findClosestIndex(value, function(x) {
    return x[key] ? x[key] : undefined;
  }, "any"));
  return dataItem;
}

这将在所有图表中启用多光标。

或者，如果您只想为单个轴启用：

valueAxisX.getSeriesDataItem = function(series, position) {
  var key = this.axisFieldName + this.axisLetter;
  var value = this.positionToValue(position);
  var dataItem = series.dataItems.getIndex(series.dataItems.findClosestIndex(value, function(x) {
    return x[key] ? x[key] : undefined;
  }, "any"));
  return dataItem;
}

如果您不想一直显示所有系列的所有工具提示，您可以将光标设置maxTooltipDistance为一个较小的数字，以便仅当目标项目紧密包装在一起时才显示多个工具提示，例如：

chart.cursor.maxTooltipDistance = 10;

推荐阅读