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

问题描述

从这里找到图片

    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}:[/]
Population: {value.value}
Income: {valueX.value}
Life 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 的屏幕截图.

Here i am using amcharts with react.jsPlease check the screenshot for BubbleChart.

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

Is there any way to get data for the same bubble when user will trigger click event.

假设使用会点击china bubbble 它应该登录

Suppose use will click on china bubbble it should log

{

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

在控制台中.

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

I checked with onclick but it is not coming anything event.target.value.

只有活动课程即将到来.

Only event class is coming.

图片可在以下链接中找到.

Image is available in below link.

推荐答案

您将使用 "hit" 事件，例如

You would use the "hit" event, e.g.

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

这篇关于触发点击事件时如何在amcharts中获取气泡的价值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！