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;    `

请告知我是否有任何选项可以同时显示所有工具提示。 TIA。

Answer 1

不可能显示一个系列的所有工具提示，因为每个系列只有一个。我建议改用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;
});

我分叉了您的JSFiddle并对其进行了更新：JSFiddle

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

1 个答案: