Question

    import React 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 Brand extends React.Component {

    componentDidMount() {
        am4core.useTheme(am4themes_animated);

    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 am4core.Circle());
    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.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.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, min: 2, max: 60, property: "radius" });

    bullet.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": 1353600687809,
                "backgroundColor": "#22ff11"
            },
            {
                "title": "China",
                "id": "CN",
                "color": "#eea638",
                "continent": "asia",
                "x": -4501.57424554247,
                "y": -43.178,
                "value": 1353600687889,
                "backgroundColor": "#22ff11"
            },
            {
                "title": "Colombia",
                "id": "CO",
                "color": "#86a965",
                "continent": "south_america",
                "x": 8035.65638212719,
                "y": 73.835,
                "value": 135360068734
            },
            {
                "title": "india",
                "id": "CO",
                "color": "#86a965",
                "continent": "south_america",
                "x": -8035.65638212719,
                "y": 45.835,
                "value": 1353600687123
            },
            {
                "title": "japan",
                "id": "CO",
                "color": "#86a965",
                "continent": "south_america",
                "x": 8035.65638212719,
                "y": -54.835,
                "value": 1353600687129
            },
            {
                "title": "mexico",
                "id": "CO",
                "color": "#86a965",
                "continent": "south_america",
                "x": -6035.65638212719,
                "y": -53.835,
                "value": 1353600687998
            },
        ];
    }

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

    handleSentiments = (sentiment) => {
        this.setState({
            active:sentiment
        }, () => {
            this.componentDidMount(sentiment=sentiment)
        })
    }

        render(){
            return (
                <div>

                    <div class="chart-area" id="bubbleChart" style={{ width: "100%", height: '600px' }}>
                    </div>

                </div>
            )
        }
    }

    export default Brand;

嗨，我正在使用带有react.js的amcharts。

我想更改图表的backgroundColor。

有什么办法吗？

我正在检查文档，无法解决。

默认情况下，图表的backgroundColor是透明的。我想使其变成浅绿色且不透明。

我需要在对象内部进行更改吗？

数据字段？

请看看。

Answer 1

您可以在fill实例上设置opacity和chart属性。

chart.background.fill = '#0f0'
chart.background.opacity = 0.5

如何更改图表在Amcharts中的背景颜色

1 个答案: