时间戳

首页 > 解决方案 > 显示 am4charts.XYChart 中的所有工具提示

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

问题描述

大家好，我使用 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;    `

在此处输入图像描述

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

标签： javascriptjquerychartsamcharts

解决方案

LabelTooltips 似乎更符合您想要做的事情。

然而，事实仍然是它们不是工具提示。如果您仍然想要实际Tooltip的 s，例如因为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/

演示中还有其他代码可与图例切换兼容以帮助您入门。

推荐阅读