reactjs - 点击事件触发时如何获取amcharts中的气泡值

Question

find image from here

    import React, { Component } from 'react';
    import * as am4core from "@amcharts/amcharts4/core";
    import * as am4charts from "@amcharts/amcharts4/charts";
    import am4themes_animated from "@amcharts/amcharts4/themes/animated";

    am4core.useTheme(am4themes_animated);

    class BubbleChart extends Component {
    componentDidMount() {
        let hide = document.querySelector("rect").width
        console.log(hide,"check")
        let chart = am4core.create("bubbleChart", am4charts.XYChart);

        let valueAxisX = chart.xAxes.push(new am4charts.ValueAxis());
        valueAxisX.renderer.ticks.template.disabled = true;
        valueAxisX.renderer.axisFills.template.disabled = true;

        let valueAxisY = chart.yAxes.push(new am4charts.ValueAxis());
        valueAxisY.renderer.ticks.template.disabled = true;
        valueAxisY.renderer.axisFills.template.disabled = true;

        let series = chart.series.push(new am4charts.LineSeries());
        series.dataFields.valueX = "x";
        series.dataFields.valueY = "y";
        series.dataFields.value = "value";
        series.strokeOpacity = 0;
        series.sequencedInterpolation = true;
        series.tooltip.pointerOrientation = "vertical";

        let bullet = series.bullets.push(new am4charts.CircleBullet());
        bullet.fill = am4core.color("#ff0000");
        bullet.propertyFields.fill = "color";
        bullet.strokeOpacity = 0;
        bullet.strokeWidth = 2;
        bullet.fillOpacity = 0.5;
        bullet.stroke = am4core.color("#ffffff");
        bullet.hiddenState.properties.opacity = 0;
        bullet.circle.tooltipText = "[bold]{title}:[/]\nPopulation: {value.value}\nIncome: {valueX.value}\nLife expectancy:{valueY.value}";

        let outline = chart.plotContainer.createChild(am4core.Circle);
        outline.fillOpacity = 0;
        outline.strokeOpacity = 0.8;
        outline.stroke = am4core.color("#ff0000");
        outline.strokeWidth = 2;
        outline.hide(0);

        let blurFilter = new am4core.BlurFilter();
        outline.filters.push(blurFilter);

        bullet.events.on("over", function(event) {
            let target = event.target;
            chart.cursor.triggerMove({ x: target.pixelX, y: target.pixelY }, "hard");
            chart.cursor.lineX.y = target.pixelY;
            chart.cursor.lineY.x = target.pixelX - chart.plotContainer.pixelWidth;
            valueAxisX.tooltip.disabled = false;
            valueAxisY.tooltip.disabled = false;

            outline.radius = target.circle.pixelRadius + 2;
            outline.x = target.pixelX;
            outline.y = target.pixelY;
            outline.show();
        })

        bullet.events.on("out", function(event) {
            chart.cursor.triggerMove(event.pointer.point, "none");
            chart.cursor.lineX.y = 0;
            chart.cursor.lineY.x = 0;
            valueAxisX.tooltip.disabled = true;
            valueAxisY.tooltip.disabled = true;
            outline.hide();
        })

        let hoverState = bullet.states.create("hover");
        hoverState.properties.fillOpacity = 1;
        hoverState.properties.strokeOpacity = 1;

        series.heatRules.push({ target: bullet.circle, min: 2, max: 60, property: "radius" });

        bullet.circle.adapter.add("tooltipY", function (tooltipY, target) {
            return -target.radius;
        })

        chart.cursor = new am4charts.XYCursor();
        chart.cursor.behavior = "zoomXY";

        chart.scrollbarX = new am4core.Scrollbar();
        chart.scrollbarY = new am4core.Scrollbar();

        chart.data = [
            {
                "title": "Chad",
                "id": "TD",
                "color": "#de4c4f",
                "continent": "africa",
                "x": 1768.88201756553,
                "y": 50.724,
                "value": 11830573
            },
            {
                "title": "Chile",
                "id": "CL",
                "color": "#86a965",
                "continent": "south_america",
                "x": 15403.7608144625,
                "y": 79.691,
                "value": 17423214
            },
            {

                "title": "China",
                "id": "CN",
                "color": "#eea638",
                "continent": "asia",
                "x": 9501.57424554247,
                "y": 75.178,
                "value": 1353600687
            }
        ];
    }

    componentWillUnmount() {
        if (this.chart) {
        this.chart.dispose();
        }
    }


    render() {
        return (
        <div id="bubbleChart" style={{ width: "100%", height: "500px" }}></div>
        );
    }
    }

    export default BubbleChart;

这里我将amcharts与react.js一起使用 请检查BubbleChart的屏幕截图。

当用户触发点击事件时，有没有办法获取同一个气泡的数据。

假设用户点击china bubbble，它应该记录

{

"title": "China",
"id": "CN",
"color": "#eea638",
"continent": "asia",
"x": 9501.57424554247,
"y": 75.178,
"value": 1353600687
}

这在控制台中。

我检查了 onclick 但它没有出现任何 event.target.value。

只有事件类即将到来。

图片可在下面的链接中找到。

Answer 1

您可以使用“hit”事件，例如

bullet.events.on("hit", function(event){
  console.log(event.target.dataItem.dataContext);
});