更新 workCloud 数据 - amcharts

Question

With static data the word cloud works fine.
When the data change and I update html, the cloud doesn't update.

This is my code in HTML

<div id="chartdiv"></div>
<script type="text/javascript" src="../wordCloud.js"></script>
<script type="text/javascript">wordcloud(myData)</script>

This is How I initialize the chart

function wordcloud(myData) {        
    am4core.ready(function () {    
        // Themes begin
        am4core.useTheme(am4themes_animated);
        am4core.useTheme(am4themes_kelly);
        // Themes end

        var chart = am4core.create("chartdiv", am4plugins_wordCloud.WordCloud);
        chart.fontFamily = "Courier New";

        var series = chart.series.push(new am4plugins_wordCloud.WordCloudSeries());
        series.randomness = 0.1;
        series.rotationThreshold = 0.5;
        series.angles = [0];

        series.data = myData;

        series.dataFields.word = "tag";
        series.dataFields.value = "count";

        series.heatRules.push({
            "target": series.labels.template,
            "property": "fill",
            "min": am4core.color("#0000CC"),
            "max": am4core.color("#CC00CC"),
            "dataField": "value"
        });

        series.labels.template.tooltipText = "{word}: {value}";

        var hoverState = series.labels.template.states.create("hover");
        hoverState.properties.fill = am4core.color("#FF0000");

        var title = chart.titles.create();
        title.text = "Most frequent words in corpus";
        title.fontSize = 20;
        title.fontWeight = "800";

    });
}

Users can use a button to have more or less words displayed in the tag cloud.
The new data is then calculated in the back end. But how can I update the cloud?
Thanks for any help.

Edit:

I read the documentation and also read this thread . But this is not helping me because the difference btw. word cloud and chart is that the data are added via series variable and not the chart variable.

Answer 1

The same update rules mentioned in the linked thread apply to series-level data - replacing the array, calling addData or updating in place with invalidateRawData (both of which have series-level methods) will enable you to update the WordCloud. Your code seems to have the same limitation as the previous thread's code where you don't have access to the chart variable outside of your method, so I'm not seeing how you would exactly update that instance without making similar changes.

Basic demo below using a button that sets a new data array on the series:

 var myData = [{ 'tag': 'Yes', 'count': 50 }, { 'tag': 'No', 'count': 50 }, { 'tag': 'Maybe', 'count': 50 }] am4core.useTheme(am4themes_animated); // Themes end var chart = am4core.create("chartdiv", am4plugins_wordCloud.WordCloud); chart.fontFamily = "Courier New"; var series = chart.series.push(new am4plugins_wordCloud.WordCloudSeries()); series.randomness = 0.1; series.rotationThreshold = 0.5; series.angles = [0]; series.data = myData; series.dataFields.word = "tag"; series.dataFields.value = "count"; series.heatRules.push({ "target": series.labels.template, "property": "fill", "min": am4core.color("#0000CC"), "max": am4core.color("#CC00CC"), "dataField": "value" }); series.labels.template.tooltipText = "{word}: {value}"; var hoverState = series.labels.template.states.create("hover"); hoverState.properties.fill = am4core.color("#FF0000"); var title = chart.titles.create(); title.text = "Most frequent words in corpus"; title.fontSize = 20; title.fontWeight = "800"; document.getElementById('change').addEventListener('click', function() { series.data = [{ 'tag': 'Yes', 'count': 50 }, { 'tag': 'No', 'count': 50 }, { 'tag': 'Maybe', 'count': 50 }, { 'tag': 'Sorta', 'count': 50 }, { 'tag': 'Kinda', 'count': 50 }] })

 #chartdiv { width: 100%; height: 350px; }

 <script src="//www.amcharts.com/lib/4/core.js"></script> <script src="//www.amcharts.com/lib/4/charts.js"></script> <script src="//www.amcharts.com/lib/4/plugins/wordCloud.js"></script> <script src="//www.amcharts.com/lib/4/themes/animated.js"></script> <div id="chartdiv"></div> <button id='change'>Change data</button>