amCharts 4：加载外部数据时，值的总和不起作用

Question

I am loading an external data and values are working on series and tooltips pretty fine but the main value that is the sum is returning " undefined " as your see:

Here is the working code chart when I use static data. I put // in the dataSource that I am using to load the external data.

 am4core.useTheme(am4themes_animated); //Theme var chart = am4core.create("chartdiv", am4charts.PieChart); chart.hiddenState.properties.opacity = 0; // Cria o fade-in inicial chart.data = [ { tipo: "Call", value: 347548256.09 }, { tipo: "Put", value: 424644842.25 } ] //chart.dataSource.url = "http://www.stock1.com.br/public/js/datasource/volume_opcoes.json"; chart.language.locale = am4lang_pt_BR; /* chart.numberFormatter.numberFormat = "#a"; chart.numberFormatter.bigNumberPrefixes = [ { "number": 1e+3, "suffix": "K" }, { "number": 1e+6, "suffix": "M" }, { "number": 1e+9, "suffix": "B" } ]; */ chart.radius = am4core.percent(70); chart.innerRadius = am4core.percent(40); chart.startAngle = 180; chart.endAngle = 360; var series = chart.series.push(new am4charts.PieSeries()); series.dataFields.value = "value"; series.dataFields.category = "tipo"; series.slices.template.cornerRadius = 10; series.slices.template.innerCornerRadius = 7; series.slices.template.inert = true; series.slices.template.stroke = new am4core.InterfaceColorSet().getFor("background"); series.slices.template.strokeWidth = 1; series.slices.template.strokeOpacity = 1; series.slices.template.tooltipText = "R$ {value.value}"; series.slices.template.tooltipText.fill = am4core.color("#ffffff"); series.alignLabels = false; series.labels.template.bent = true; series.labels.template.radius = 8; series.labels.template.padding(0,0,0,0); series.labels.template.fill = am4core.color("#475F7B"); series.hiddenState.properties.startAngle = 90; series.hiddenState.properties.endAngle = 90; var label = chart.seriesContainer.createChild(am4core.Label); label.fill = am4core.color("#475F7B"); label.textAlign = "middle"; label.horizontalCenter = "middle"; label.verticalCenter = "middle"; label.adapter.add("text", function(text, target) { return "[bold font-size:18px]" + "R$" + series.dataItem.values.value.sum + "\n" + "[font-size:14px]Volume Total[/]"; });

 <script src="https://cdn.amcharts.com/lib/4/core.js"></script> <script src="https://cdn.amcharts.com/lib/4/charts.js"></script> <script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script> <script src="//www.amcharts.com/lib/4/lang/pt_BR.js"></script> <div id="chartdiv"></div>

Here you see the sum working because I am loading the data right here. This snippet doesn't let me use my json. By the way, the one I am trying to load is: json .

A second problem I am facing is the reduction of large numbers that is not working as it should. I let commented on the snippet above.

Does anyone know where I'm going wrong?

Answer 1

After a long searching and reading amCharts 4 documentation, here is the answer:

The "undefined" was solved by changing the var label and removing the label.adapter.add to:

var label = series.createChild(am4core.Label);
label.text = "[bold font-size:16px]R${values.value.sum}\n[normal]Volume Total";
label.fill = am4core.color("#475F7B");
label.horizontalCenter = "middle";
label.verticalCenter = "bottom";

The second problem, about the Big Numbers, was solved changing the chart.numberFormatter.numberFormat = "#a"; to chart.numberFormatter.numberFormat = "#.0a"; .