Javascript AMSCHARTS 4：如何组合LineSeries的工具提示_Javascript_Amcharts

Javascript AMSCHARTS 4：如何组合LineSeries的工具提示

javascript

Javascript AMSCHARTS 4：如何组合LineSeries的工具提示,javascript,amcharts,Javascript,Amcharts,我有一张包含3个系列的图表。有时，两条线相互交叉。在这些点上，仅显示最后添加的系列的单个工具提示如果点位于同一位置，如何将这些工具提示合并为一个包含所有三个系列信息的工具提示我使用线系列构建图表，并在其上放置圆圈： /* Create series */ var series1 = chart.series.push(new am4charts.LineSeries()); series1.dataFields.valueY = "cars"; series1.dataFields.cat

我有一张包含3个系列的图表。有时，两条线相互交叉。在这些点上，仅显示最后添加的系列的单个工具提示

如果点位于同一位置，如何将这些工具提示合并为一个包含所有三个系列信息的工具提示

我使用线系列构建图表，并在其上放置圆圈：

/* Create series */
var series1 = chart.series.push(new am4charts.LineSeries());
series1.dataFields.valueY = "cars";
series1.dataFields.categoryX = "year";
series1.name = "Cars";
series1.strokeWidth = 3;
series1.tensionX = 0.7;
bullet1 = series1.bullets.push(new am4charts.CircleBullet());
bullet1.tooltipText = `[bold]YEAR {categoryX}[/]
----
cars: {cars}`;

var series2 = chart.series.push(new am4charts.LineSeries());
series2.dataFields.valueY = "motorcycles";
series2.dataFields.categoryX = "year";
series2.name = "Motorcycles";
series2.strokeWidth = 3;
series2.tensionX = 0.7;
bullet2 = series2.bullets.push(new am4charts.CircleBullet());
bullet2.tooltipText = `[bold]YEAR {categoryX}[/]
----
motorcycles: {motorcycles}`;

var series3 = chart.series.push(new am4charts.LineSeries());
series3.dataFields.valueY = "bicycles";
series3.dataFields.categoryX = "year";
series3.name = "Bicycles";
series3.strokeWidth = 3;
series3.tensionX = 0.7;
bullet3 = series3.bullets.push(new am4charts.CircleBullet());
bullet3.tooltipText = `[bold]YEAR {categoryX}[/]
----
Bicycles: {bicycles}`;

完整示例：

将光标与工具提示定位相结合。可以通过以下方式创建光标：

chart.cursor = new am4charts.XYCursor();

这将显示所有标签，但定位不良

您应该使用

工具提示

对象来定位每个系列的工具提示：

var t = new am4core.Tooltip();
t.dy=-20; // This will move the tooltip 20 pixels up
bullet2.tooltipText = `[bold]YEAR {categoryX}[/]
---- 
motorcycles: {motorcycles}`
bullet2.tooltip = t;

查看所有不同的定位选项。

将光标与工具提示定位相结合。可以通过以下方式创建光标：

chart.cursor = new am4charts.XYCursor();

这将显示所有标签，但定位不良

您应该使用

工具提示

对象来定位每个系列的工具提示：

var t = new am4core.Tooltip();
t.dy=-20; // This will move the tooltip 20 pixels up
bullet2.tooltipText = `[bold]YEAR {categoryX}[/]
---- 
motorcycles: {motorcycles}`
bullet2.tooltip = t;

查看所有不同的定位选项。

就像Albondi所说的，您可以从图表光标开始，这样我们就可以随时触发所有工具提示：

chart.cursor=new am4charts.XYCursor（）；

从这里开始，如果您想过滤显示哪些工具提示以及在其余工具提示中显示什么，我建议在每个项目符号的

tooltipText

上设置一个。首先触发工具提示的是对象是否具有非空的

tooltipText

属性。因此，对于我们想要隐藏的工具提示，使用适配器，我们只需返回

”

，即可随意隐藏它们

要确定我们是否在多个项目上悬停，在这种情况下，我们只需检查它们是否具有相同的精确值，我们知道值键是

汽车

，

摩托车

，和

自行车

，因此，如果它们悬停时完全相同，请抑制其中两个工具提示，并修改另一个的文本以显示所有三个的数据。适配器的第二个参数是我们悬停的对象，它的

dataItem.dataContext

将引用我们要比较的数据/值

bullet1.adapter.add（“tooltipText”，blanktooltiptextensamevalues）；
bullet2.adapter.add（“tooltipText”，blankTooltipTextOnSameValues）；
bullet3.adapter.add（“tooltipText”，函数（文本，目标）{
var data=target.dataItem.dataContext；
if（data.bicycles===data.motorcycles&&data.bicycles===data.cars）{
返回“[bold]年{categoryX}[/]
----
汽车：{Cars}
摩托车：{摩托车}
自行车：{Bicycles}`；
}
返回文本；
});
函数blankToolTiptExtensameValues（文本、目标）{
var data=target.dataItem.dataContext；
if（data.bicycles===data.motorcycles&&data.bicycles===data.cars）{
返回“”；
}
返回文本；
}

下面是包含上述更改的代码示例：

如果需要，可以省略图表光标，然后必须将光标分别悬停在项目符号上，才能显示工具提示。由于

series3

是图表的最新添加项，因此它将具有更高的堆叠顺序，并将在同一点覆盖其他项目符号，因此上面的适配器将在使用/不使用图表光标的情况下实现相同的效果。

正如Albondi所说，您可以从图表光标开始，这样我们就可以随时触发所有工具提示：

chart.cursor=new am4charts.XYCursor（）；