问题
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; `
Please let me know if there is any option to display all the tooltips at the sametime. TIA .
回答1:
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;
});
I forked your JSFiddle and updated it: JSFiddle
回答2:
LabelTooltips seem more along the lines of what you're looking to do.
However, the fact remains they're not tooltips. If you still want actual Tooltips, e.g. because LabelBullets don't have the ... tip that points to its associated bullet, since tooltips are sort of like singletons, i.e. 1 per series and the bullets utilize that, you'll have to roll your own.
If you have the animation theme enabled and have an initial animation, to avoid problems wait til the series' animations are over to do what you need to:
// 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
});
});
});
At that point we can create tooltips, link their data to the series', and place them according to each bullet. The bullets can be found in the series' bulletsContainer. Be sure to customize the tooltips as needed, e.g.:
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();
});
Fork:
https://jsfiddle.net/notacouch/9Ljk7t6z/
There's additional code in the demo for compatibility with legend toggling to get you started.
来源：https://stackoverflow.com/questions/55019921/displaying-all-the-tooltips-in-am4charts-xychart