显示 am4charts.XYChart 中的所有工具提示

Question

大家好，我正在使用 am4charts.XYChart 来显示两个不同供应商的价格

图表工作正常，每个点的工具提示只有当我们将光标悬停在图表中的点上时才可见，但我的要求是图表中所有点的工具提示应该在图表中显示被渲染。

它应该一直显示而不悬停。

我已使用以下代码生成图表。

   <script src="https://www.amcharts.com/lib/4/core.js"></script>
   <script src="https://www.amcharts.com/lib/4/charts.js"></script>
   <script src="https://www.amcharts.com/lib/4/themes/dark.js"></script>
   <script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

   dynamic_data_arr = [{date: "2019-02-25", market1: "21.67", sales1: "Amazon", market2: "25.92", sales2: "La Collette"},
{date: "2019-02-26", market1: "21.67", sales1: "Amazon", market2: "25.92", sales2: "La Collette,Co-op"}]
                            am4core.useTheme(am4themes_dark);
                            am4core.useTheme(am4themes_animated);
                            // Themes end

                            // Create chart instance
                            chart = am4core.create("amcharts_chartdiv", am4charts.XYChart);                      
                            // Add data
                            // chart.data = [] ;
                            chart.data =  dynamic_data_arr;                                                      
                            // chart.validateData(); 
                            // Create axes
                            var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
                            //dateAxis.renderer.grid.template.location = 0;
                            //dateAxis.renderer.minGridDistance = 30;

                            var valueAxis1 = chart.yAxes.push(new am4charts.ValueAxis());
                            // valueAxis1.title.text = "Sales";

                            console.log(valueAxis1);

                            var valueAxis2 = chart.yAxes.push(new am4charts.ValueAxis());
                            console.log(valueAxis2);
                            // valueAxis2.title.text = "Market Days";
                            valueAxis2.renderer.opposite = true;
                            valueAxis2.renderer.grid.template.disabled = true; 

                            var series3 = chart.series.push(new am4charts.LineSeries());
                            series3.dataFields.valueY = "market1";
                            series3.dataFields.dateX = "date";
                            series3.dataFields.nameX = "sales1";
                            series3.name = "Amazon";
                            series3.strokeWidth = 2;
                            series3.tensionX = 0.7;
                            series3.yAxis = valueAxis2;
                            series3.tooltipText = "{nameX}\n[bold font-size: 20]{valueY}[/]";
                            series3.showBalloon = true;


                            var bullet3 = series3.bullets.push(new am4charts.CircleBullet());
                            bullet3.circle.radius = 3;
                            bullet3.circle.strokeWidth = 2;
                            bullet3.circle.fill = am4core.color("#fff");

                            var series4 = chart.series.push(new am4charts.LineSeries());
                            series4.dataFields.valueY = "market2";
                            series4.dataFields.dateX = "date";
                            series4.dataFields.nameX = "sales2";
                            series4.name = "Local Vendors";
                            series4.strokeWidth = 2;
                            series4.tensionX = 0.7;
                            series4.yAxis = valueAxis2;
                            series4.tooltipText = "{nameX}\n[bold font-size: 20]{valueY}[/]";
                            series4.stroke = chart.colors.getIndex(0).lighten(0.5);
                            series4.strokeDasharray = "3,3";
                            series4.showBalloon = true;

                            var bullet4 = series4.bullets.push(new am4charts.CircleBullet());
                            bullet4.circle.radius = 3;
                            bullet4.circle.strokeWidth = 2;
                            bullet4.circle.fill = am4core.color("#fff");

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

                            // Add legend
                            chart.legend = new am4charts.Legend();
                            chart.legend.position = "top";

                            // Add scrollbar
                            chart.scrollbarX = new am4charts.XYChartScrollbar();
                            // chart.scrollbarX.series.push(series1);
                            chart.scrollbarX.series.push(series3);
                            chart.scrollbarX.parent = chart.bottomAxesContainer;    `

如果有任何选项可以同时显示所有工具提示，请告诉我。蒂亚。

Answer 1

LabelTooltips 似乎更符合您的目标。

但是，事实仍然是它们不是工具提示。如果您仍然想要实际的Tooltips，例如因为LabelBullets 没有指向其相关项目符号的 ... 提示，因为工具提示有点像单例，即每个系列 1 个并且项目符号使用它，你必须自己滚动。

如果您启用了动画主题并有一个初始动画，为避免出现问题，请等到系列动画结束后再做您需要做的事情：

          // A series already gets a transitionended event, so we'll wait for chart to be ready to listen to the right one
          chart.events.once("ready", function(event) {
            chart.series.each(function(series) {
              // Wait for the init animation to be over before doing what we need to
              series.events.once("transitionended", function(seriesEvent) {
                // your code here
              });
            });
          });

此时我们可以创建工具提示，将其数据链接到系列'，并根据每个项目符号放置它们。子弹可以在该系列的bulletsContainer 中找到。请务必根据需要自定义工具提示，例如：

                series.bulletsContainer.children.each(function(bullet, index) {
                  var tooltip = new am4core.Tooltip();
                  tooltip.dataItem = tooltip.tooltipDataItem = series.dataItems.getIndex(index);
                  // place the tooltip in an appropriate container so the x/y coords are exact
                  tooltip.parent = chart.plotContainer;
                  tooltip.x = bullet.x;
                  tooltip.y = bullet.y;
                  tooltip.label.text = "{nameX}\n[bold font-size: 20]{valueY}[/]";
                  tooltip.getFillFromObject = false;
                  tooltip.background.fill = series.fill;
                  tooltip.show();
                });

分叉：

https://jsfiddle.net/notacouch/9Ljk7t6z/

演示中有额外的代码用于与图例切换兼容以帮助您入门。

Answer 2

不可能显示一个系列的所有工具提示，因为每个系列只有一个。我建议改用 LabelBullets (docs) 并将它们设置为工具提示的样式。

chart.series.each(series => {
    var labelBullet = series.bullets.push(new am4charts.LabelBullet());
    labelBullet.setStateOnChildren = true;
    labelBullet.label.text = "{nameX}\n[bold font-size: 20]{valueY}[/]";
    labelBullet.label.maxWidth = 150;
    labelBullet.label.wrap = true;
    labelBullet.label.truncate = false;
    labelBullet.label.textAlign = "middle";
    labelBullet.label.padding(5, 5, 5, 5);
    labelBullet.label.fill = am4core.color("#000");
    const background = new am4core.RoundedRectangle();
    background.cornerRadius(3, 3, 3, 3);
    labelBullet.label.background = background;
    labelBullet.label.background.fill = series.fill;
    labelBullet.label.background.fillOpacity = 0.9;
    labelBullet.label.background.stroke = am4core.color("#fff");
    labelBullet.label.background.strokeOpacity = 1;
});

我 fork 你的 JSFiddle 并更新了它：JSFiddle