在 amcharts 序列图中将总和文本移动到最右边

Question

下面是我用来构造 serial graph 和 amcharts plugin. I have referred this demo 以添加 sum text 的代码，但唯一的区别是 demo 它是垂直图，我使用 rotate=true 选项使它成为 horizontal graph。在上面提到的演示中，sum text 将位于顶部，但这里面临的问题是 sum text，位于标签内。我想将它附加到最后一个 bar 之后的最右边。另外，如果 0，我想隐藏 sum text。但是我没有在文档或 SO 的任何地方找到任何合适的选项。谁能指导我走正确的道路？

var data = [{
  "name": "Test1",
  "firstAmount": 0,
  "secondAmount": 0,
  "thirdAmount": 0,
  "forthAmount": 0,
  "total": 0
}, {
  "name": "Test2",
  "firstAmount": 4164,
  "secondAmount": 1232,
  "thirdAmount": 0,
  "forthAmount": 0,
  "total": 5396
}, {
  "name": "Test3",
  "firstAmount": 2509,
  "secondAmount": 0,
  "thirdAmount": 0,
  "forthAmount": 0,
  "total": 2509
}, {
  "name": "Test4",
  "firstAmount": 9909,
  "secondAmount": 200,
  "thirdAmount": 330,
  "forthAmount": 222,
  "total": 10661
}]
AmCharts.addInitHandler(function(chart) {
  // iterate through data
  for (var i = 0; i < chart.dataProvider.length; i++) {
    var dp = chart.dataProvider[i];

    dp.total = 0;
    dp.totalText = 0;
    for (var x = 0; x < chart.graphs.length; x++) {
      var g = chart.graphs[x];
      dp.totalText += dp[g.valueField];
      console.log(dp[g.valueField])
      if (dp[g.valueField] > 0)
        dp.total += dp[g.valueField];
      if (dp.total == 0) dp.total = "";
    }
  }
  var graph = new AmCharts.AmGraph();
  graph.valueField = "total";
  graph.labelText = "$ [[totalText]]";
  graph.visibleInLegend = false;
  graph.lineAlpha = 0;
  graph.showBalloon = false;
  graph.fontSize = 13;
  chart.addGraph(graph);
}, ["serial"]);
var chart = AmCharts.makeChart("chartdiv", {
  //"theme": "light",
  "type": "serial",
  "dataProvider": data,
  "startDuration": 1,
  "graphs": [{
    "balloonText": "<b>$ [[firstAmount]]</b>",
    "fillAlphas": 1,
    "lineAlpha": 0,
    "type": "column",
    "color": "#fdaa29",
    "valueField": "firstAmount"
  }, {
    "balloonText": "<b>$ [[secondAmount]]</b>",
    "fillAlphas": 1,
    "lineAlpha": 0,
    "type": "column",
    "color": "#45aeea",
    "valueField": "secondAmount"
  }, {
    "balloonText": "<b>$ [[thirdAmount]]</b>",
    "fillAlphas": 0.8,
    "lineAlpha": 0,
    "type": "column",
    "color": "#8fc842",
    "valueField": "thirdAmount"
  }, {
    "balloonText": "<b>$ [[forthAmount]]</b>",
    "fillAlphas": 0.8,
    "lineAlpha": 0,
    "type": "column",
    "color": "#d43a43",
    "valueField": "forthAmount"
  }],
  "valueAxes": [{
    "stackType": "regular",
    "axisAlpha": 0.3,
    "gridAlpha": 0
  }],
  "rotate": true,
  "columnWidth": 0.8,
  "categoryField": "name",
  "categoryAxis": {
    "gridPosition": "start",
    "axisAlpha": 0,
    "gridAlpha": 0,
    "position": "left"
  },
  "export": {
    "enabled": true
  }
});

Answer 1

好吧，我已经解决了.. :) 有一个名为 graph.labelPosition 的选项，它的值为 top，我已经将其设为 right 并删除0 列表中的总数，如果它是 0，我刚刚清空了它的文本。以下是更改：

AmCharts.addInitHandler(function(chart) {
  // iterate through data
  for (var i = 0; i < chart.dataProvider.length; i++) {
    var dp = chart.dataProvider[i];

    dp.total = 0;
    dp.totalText = 0;
    dp.totalSymbol="$"; //added currency here
    for (var x = 0; x < chart.graphs.length; x++) {
      var g = chart.graphs[x];
      dp.totalText += dp[g.valueField];
      if (dp[g.valueField] > 0)
        dp.total += dp[g.valueField];
      if (dp.total == 0) {
           dp.total = "";dp.totalText="";dp.totalSymbol=""; //empty everything
      };
    }
  }
  var graph = new AmCharts.AmGraph();
  graph.valueField = "total";
  graph.labelText = "[[totalSymbol]] [[totalText]]";
  graph.visibleInLegend = false;
  graph.lineAlpha = 0;
  graph.labelPosition="right";//set label to extreme right
  graph.showBalloon = false;
  graph.fontSize = 13;
  chart.addGraph(graph);
}, ["serial"]);

UPDATED DEMO

Answer 2

这是一个演示：

https://jsfiddle.net/ry1dsoLa/

你必须使用：

graph.labelOffset = 5;
graph.labelPosition = "right";

将其定位在右侧。

要删除 0 标签，您可以使用 graph.labelFunction

graph.labelFunction = function(item, label) {
    return label == "$ 0" ? "" : label;
};

您不需要 for 循环，因为您的数据集中已经有一个 total。

但是，您现在也可以只将图形添加到 graphs 数组，而无需挂接到 init 函数。

像这样：

https://jsfiddle.net/ry1dsoLa/1/

在 amcharts 序列图中将总和文本移动到最右边

Moving sum text to the extreme right in amcharts serial graph

javascript

jquery

amcharts