在am4charts.XYChart中显示所有工具提示 [英] Displaying all the tooltips in am4charts.XYChart
问题描述
您好，我正在使用am4charts.XYChart来显示两个不同供应商的价格
Hi all I'm using am4charts.XYChart for showing the prices of two different Vendors
图形工作正常，仅当将光标悬停在图形中的点上时，每个点的工具提示才可见，但是我的要求是，在图形中应显示图形中所有点的工具提示已呈现.
The graph is working fine and tooltip of each point is visible only if we hover the cursor over the points in the graph , but my requirement is the tooltip of all the points in the graph should be displayed while the graph is rendered.
它应该一直显示而不悬停.
It should be displaying all the time without hovering .
我已使用以下代码生成该图.
I have used the following code to generate the graph .
<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.
Please let me know if there is any option to display all the tooltips at the sametime. TIA .
推荐答案
无法显示系列的所有工具提示，因为每个系列只有一个.我建议改用LabelBullets( docs )并将其样式设置为工具提示
Show all tooltips of a series is not possible, because there is only one per series. I would suggest to use LabelBullets instead (docs) and style them like tooltips.
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
I forked your JSFiddle and updated it: JSFiddle
这篇关于在am4charts.XYChart中显示所有工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
