amchartsシリアルグラフの下

Question

Problem Fiddle

で極端な右に和のテキストを移動すると、コードがamchartsプラグインでserial graphを構築するために使用しています。私はこれを参照しましたdemoにはsum textを追加しましたが、唯一の違いはdemoで、これは垂直グラフであり、にするにはrotate=trueオプションを使用しました。上記のデモでは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

はデモです右側。 0ラベルを削除するには

、あなたはすでにあなたのデータセットでtotalを持っているので、あなたは、ループのための必要はありませんgraph.labelFunction

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

を使用することができます。

機能にフックする必要なく、今すぐグラフをgraphsアレイに追加することもできます。私はあなたがすでに解決anothingた参照

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

Answer 2

まあ、私はそれを解決した。.. :)オプションがありますtopとして評価されたと私はrightにそれを作ったし、リストから0合計を削除するには、私はちょうど空にしました、graph.labelPositionと呼ばれますそのテキストが0だった場合、そのテキスト。以下は変更されている：

https://jsfiddle.net/ry1dsoLa/

あなたが使用する必要があります：

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

を上に配置するにはここで

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