微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决amCharts 4:加载外部数据时值的总和不起作用

我正在加载外部数据和值正在处理系列和工具提示,但总和的主要值返回“未定义”,如您所见:

undefined

这是我使用静态数据时的工作代码图表。我将 // 放在用于加载外部数据的数据源中。

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);
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>

在这里您看到总和有效,因为我正在此处加载数据。这个片段不允许我使用我的 json。顺便说一句,我要加载的是:json

我面临的第二个问题是减少无法正常工作的大量数字。我让评论了上面的片段。

有人知道我哪里出错了吗?

解决方法

经过长时间的搜索和阅读 amCharts 4 文档后,答案如下:

通过更改 var label 并删除 label.adapter.add 来解决“未定义”问题:

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";

关于大数的第二个问题已解决,将 chart.numberFormatter.numberFormat = "#a"; 更改为 chart.numberFormatter.numberFormat = "#.0a";

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。