【问题标题】:amCharts 4: sum of values does not work when loading external dataamCharts 4:加载外部数据时值的总和不起作用
【发布时间】:2021-02-08 02:34:59
【问题描述】:

我正在加载一个外部数据,值在系列和工具提示上工作得很好,但是总和的主要值返回“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,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>

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

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

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

【问题讨论】:

    标签: javascript json charts amcharts amcharts4


    【解决方案1】:

    经过长时间的搜索和阅读 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";

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-09-07
      • 2011-11-23
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多