Перемещение текста суммы в крайнем правом в amcharts серийному графа

Question

Problem Fiddle

Ниже код я использую для построения serial graph с amcharts плагин. Я передал это demo, чтобы добавить sum text, но с той лишь разницей, что в demo это вертикальный график, и я использовал rotate=true вариант сделать это horizontal graph. В демо, упомянутом выше, sum text будет сверху, но проблема, стоящая здесь, - sum text, входит в ярлык. Я хотел бы добавить его в крайнее правое после последнего bar. Кроме того, я хотел бы скрыть sum text, если его 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; 
}; 

Вам не нужно для цикла, потому что у вас уже есть в наборе данных в total.

Однако вы можете просто добавить график в массив graphs, без необходимости подключаться к функции init.

Как это:

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

Answer 2

Ну, я решил это .. :) Существует вариант называется 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