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

下面是我用插件构建

序列图的代码。我已经引用了这个来添加
和文本
，但唯一的区别是在
演示中它是垂直图形，我使用了
旋转=真
选项使它成为
水平图形
。在上面提到的演示中，
sum text
将位于顶部，但我在这里面临的问题是
sum text
，在标签中。我想把它附加到最后一个
条
之后的最右边。另外，如果
0
，我想隐藏
sum文本。但我没有在文档中找到任何合适的选项。有谁能指引我走正确的路吗

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

var数据=[{
“名称”：“Test1”，
“firstAmount”：0，
“第二金额”：0，
“第三山”：0，
“福塔蒙特”：0，
“总数”：0
}, {
“名称”：“Test2”，
“第一笔金额”：4164，
“第二金额”：1232，
“第三山”：0，
“福塔蒙特”：0，
“总数”：5396
}, {
“名称”：“Test3”，
“第一笔金额”：2509，
“第二金额”：0，
“第三山”：0，
“福塔蒙特”：0，
“总数”：2509
}, {
“名称”：“Test4”，
“第一笔金额”：9909，
“第二金额”：200，
“第三山”：330，
“福塔蒙特”：222，
“总数”：10661
}]
addInitHandler（函数（图表）{
//遍历数据
对于（var i=0；i0）
dp.total+=dp[g.valueField]；
如果（dp.total==0）dp.total=“”；
}
}
var-graph=新的AmCharts.AmGraph（）；
graph.valueField=“总计”；
graph.labelText=“$[[totalText]]”；
graph.visibleInLegend=false；
graph.lineAlpha=0；
graph.showBalloon=false；
graph.fontSize=13；
图表。添加图表（图形）；
}，[“序列号]）；
var chart=AmCharts.makeChart（“chartdiv”{
//“主题”：“光”，
“类型”：“串行”，
“数据提供者”：数据，
“起始持续时间”：1，
“图表”：[{
“BallooText”：“$[[firstAmount]]”，
“填充字母”：1，
“lineAlpha”：0，
“类型”：“列”，
“颜色”：“fdaa29”，
“valueField”：“firstAmount”
}, {
“BallooText”：“$[[secondAmount]]”，
“填充字母”：1，
“lineAlpha”：0，
“类型”：“列”，
“颜色”：“45aeea”，
“valueField”：“第二笔金额”
}, {
“气球文字”：“$[[thirdAmount]]”，
“填充字母”：0.8，
“lineAlpha”：0，
“类型”：“列”，
“颜色”：“8fc842”，
“valueField”：“thirdAmount”
}, {
“气球文字”：“$[[forthAmount]]”，
“填充字母”：0.8，
“lineAlpha”：0，
“类型”：“列”，
“颜色”：“d43a43”，
“valueField”：“forthAmount”
}],
“价值轴”：[{
“stackType”：“常规”，
“axisAlpha”：0.3，
“gridAlpha”：0
}],
“旋转”：正确，
“柱宽”：0.8，
“类别字段”：“名称”，
“分类法”：{
“网格位置”：“开始”，
“axisAlpha”：0，
“gridAlpha”：0，
“位置”：“左”
},
“出口”：{
“已启用”：真
}
});
好吧，我已经解决了有一个名为
graph.labelPosition
的选项，该选项的值为
top
，我将其设置为
右侧
，要从列表中删除
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"]);

AmCharts.addInitHandler（函数（图表）{
//遍历数据
对于（var i=0；i0）
dp.total+=dp[g.valueField]；
如果（dp.total==0）{
dp.total=“”；dp.totalText=“”；dp.totalSymbol=“”；//清空所有内容
};
}
}
var-graph=新的AmCharts.AmGraph（）；
graph.valueField=“总计”；
graph.labelText=“[[totalSymbol]][[totalText]]”；
graph.visibleInLegend=false；
graph.lineAlpha=0；
graph.labelPosition=“right”//将标签设置为最右边
graph.showBalloon=false；
graph.fontSize=13；
图表。添加图表（图形）；
}，[“序列号]）；

这里是一个演示：


您必须使用：

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

将其放置在右侧

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

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

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

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

像这样：

谢谢@PierreDuc。。我还是要接受ua的回答：）感谢您在需要时随时光临……）谢谢很高兴我能再次提供帮助：）您的解决方案再次令人惊叹：）删除大量冗余代码：）更新了一点答案，伙计。。如果您注意到，标签需要时间显示，可能需要3-5秒。。我如何使它立即出现？是的，这也是我的问题。。我会看看我能做些什么：这是因为
开始持续时间
。如果将其设置为
0
，则所有内容都会立即出现。。但是没有动画。我认为这是amcharts的一个小错误。因为图形是堆叠的，所以它们将其合并为一个动画。但是，因为有4个堆叠的图形，第5个图形（标签）在4秒后不会显示。这是一个1秒钟的动画，其中标签立即出现，颜色为您想要的；）我确实是这样做的：）