javascript - 将总和文本移动到 amcharts 序列图中的最右侧

Question

<强> Problem Fiddle

下面是使用 amcharts 构建序列图的代码插件。我已经提到了这个 demo 添加sum text，但唯一的区别是在demo中它是垂直图，我使用了rotate=true使其成为水平图的选项。在上面提到的演示中，sum text 将位于顶部，但这里面临的问题是 sum text，位于标签内。我想将其附加到最后一个栏之后的最右边。另外，我想隐藏 sum 文本(如果其 0)。但我在文档或 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

这是一个演示:

https://jsfiddle.net/ry1dsoLa/

你必须使用:

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

将其放置在右侧。

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

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

您不需要 for 循环，因为您的数据集中已有总计。

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

像这样:

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