问题
I have below setting done for my amcharts serial-graph.
var data = [{
"name": "Test Name 1",
"count": 31,
"amount": 30562,
"amount1": 8241,
"amount2": 4463,
"amount3": 3125,
"amount4": 14733,
"count1": 4,
"count2": 11,
"count3": 8,
"count4": 8,
"color1": "#fdaa29",
"color2": "#45aeea",
"color3": "#8fc842",
"color4": "#d43a43"
}, {
"name": "Test Name 2",
"count": 40,
"amount": 30413,
"amount1": 12874,
"amount2": 5014,
"amount3": 4915,
"amount4": 7610,
"count1": 20,
"count2": 7,
"count3": 9,
"count4": 4,
"color1": "#fdaa29",
"color2": "#45aeea",
"color3": "#8fc842",
"color4": "#d43a43"
}, {
"name": "Test Name 3",
"count": 166,
"amount": 228353.6,
"amount1": 109492,
"amount2": 53268,
"amount3": 52860.6,
"amount4": 12733,
"count1": 51,
"count2": 57,
"count3": 46,
"count4": 12,
"color1": "#fdaa29",
"color2": "#45aeea",
"color3": "#8fc842",
"color4": "#d43a43"
}, {
"name": "Test Name 4",
"count": 15,
"amount": 61801,
"amount1": 31656,
"amount2": 15853,
"amount3": 8033,
"amount4": 6259,
"count1": 1,
"count2": 9,
"count3": 2,
"count4": 3,
"color1": "#fdaa29",
"color2": "#45aeea",
"color3": "#8fc842",
"color4": "#d43a43"
}, {
"name": "Test Name 5",
"count": 81,
"amount": 69988,
"amount1": 23040,
"amount2": 26333,
"amount3": 10791,
"amount4": 9824,
"count1": 21,
"count2": 32,
"count3": 19,
"count4": 9,
"color1": "#fdaa29",
"color2": "#45aeea",
"color3": "#8fc842",
"color4": "#d43a43"
}, {
"name": "Test Name 6",
"count": 30,
"amount": 113027,
"amount1": 56511,
"amount2": 9750,
"amount3": 34014,
"amount4": 12752,
"count1": 15,
"count2": 4,
"count3": 8,
"count4": 3,
"color1": "#fdaa29",
"color2": "#45aeea",
"color3": "#8fc842",
"color4": "#d43a43"
}, {
"name": "Test Name 7",
"count": 2,
"amount": 812,
"amount1": 0,
"amount2": 562,
"amount3": 0,
"amount4": 250,
"count1": 0,
"count2": 1,
"count3": 0,
"count4": 1,
"color1": "#fdaa29",
"color2": "#45aeea",
"color3": "#8fc842",
"color4": "#d43a43"
}, {
"name": "Test Name 8",
"count": 92,
"amount": 103502.005,
"amount1": 42177,
"amount2": 38629,
"amount3": 11338,
"amount4": 11358,
"count1": 24,
"count2": 37,
"count3": 22,
"count4": 9,
"color1": "#fdaa29",
"color2": "#45aeea",
"color3": "#8fc842",
"color4": "#d43a43"
}, {
"name": "Test Name 9",
"count": 0,
"amount": 0,
"amount1": 0,
"amount2": 0,
"amount3": 0,
"amount4": 0,
"count1": 0,
"count2": 0,
"count3": 0,
"count4": 0,
"color1": "#fdaa29",
"color2": "#45aeea",
"color3": "#8fc842",
"color4": "#d43a43",
}, {
"name": "Test Name 10",
"count": 2,
"amount": 1642.521,
"amount1": 1432.5263541,
"amount2": 210,
"amount3": 0,
"amount4": 0,
"count1": 1,
"count2": 1,
"count3": 0,
"count4": 0,
"color1": "#fdaa29",
"color2": "#45aeea",
"color3": "#8fc842",
"color4": "#d43a43",
}]
var labelText, valueField, balloonText1, balloonText2, balloonText3, balloonText4, valueField1, valueField2, valueField3, valueField4;
labelText = "$ [[amount]]";
valueField = "amount";
pieLabel = "$ [[value]]";
balloonText1 = "$ [[amount1]]";
balloonText2 = "$ [[amount2]]";
balloonText3 = "$ [[amount3]]";
balloonText4 = "$ [[amount4]]";
valueField1 = "amount1";
valueField2 = "amount2";
valueField3 = "amount3";
valueField4 = "amount4";
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"dataProvider": data,
"valueAxes": [{
"stackType": "regular",
"axisAlpha": 0,
"gridAlpha": 0.1,
"unit": "$ ",
"unitPosition": "left"
}],
"startDuration": 1,
"graphs": [{
valueField: valueField,
labelText: labelText,
labelOffset: 20,
labelPosition: "right",
labelFunction: function(item, label) {
return label == "$ 0" ? "" : label;
},
visibleInLegend: false,
lineAlpha: 0,
showBalloon: false,
fontSize: 13,
"numberFormatter": {
"precision": 2,
"decimalSeparator": ".",
"thousandsSeparator": ","
}
}, {
"balloonText": "<b>" + balloonText1 + "</b>",
"fillAlphas": 0.9,
"lineAlpha": 0,
"type": "column",
"colorField": "color1",
"valueField": valueField1,
"numberFormatter": {
"precision": 2,
"decimalSeparator": ".",
"thousandsSeparator": ","
}
}, {
"balloonText": "<b>" + balloonText2 + "</b>",
"fillAlphas": 0.9,
"lineAlpha": 0,
"type": "column",
"colorField": "color2",
"valueField": valueField2,
"numberFormatter": {
"precision": 2,
"decimalSeparator": ".",
"thousandsSeparator": ","
}
}, {
"balloonText": "<b>" + balloonText3 + "</b>",
"fillAlphas": 0.9,
"lineAlpha": 0,
"type": "column",
"colorField": "color3",
"valueField": valueField3,
"numberFormatter": {
"precision": 2,
"decimalSeparator": ".",
"thousandsSeparator": ","
}
}, {
"balloonText": "<b>" + balloonText4 + "</b>",
"fillAlphas": 0.9,
"lineAlpha": 0,
"type": "column",
"colorField": "color4",
"valueField": valueField4,
"numberFormatter": {
"precision": 2,
"decimalSeparator": ".",
"thousandsSeparator": ","
}
}],
"depth3D": 15,
"fontFamily": '"Roboto",sans-serif',
"fontSize": 12,
"angle": 25,
"rotate": true,
"columnWidth": 0.7,
"categoryField": "name",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0,
"gridAlpha": 0,
"position": "left"
}
});#chartdiv {
width: 100%;
height: 400px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>As can be seen from above code, I've applied numberFormmater for all the graphs field. I have assigned value through variable as in var labelText, valueField, balloonText1, balloonText2, etc, in the actual UI because, this graph can be changed from amount display to count display as taken from the data So the above setting. But in spite of all these, the amount is not getting formatted. Any suggestions or help on this would be really appreciable.
回答1:
The chart applies number formatting only to known metacodes like [[value]]. You are using direct references to fields in data such as [[amount]], [[amount1]], etc.
The chart does not know if those are supposed to be numeric values, hence no formatting is applied - they are displayed as they are.
The same goes with balloonText and labelText.
To fix this, simply replace all occurrences of thos meta codes to the built-in [[value]]. The chart will replace it with a formatted value, for each graph individually:
var data = [ {
"name": "Test Name 1",
"count": 31,
"amount": 30562,
"amount1": 8241,
"amount2": 4463,
"amount3": 3125,
"amount4": 14733,
"count1": 4,
"count2": 11,
"count3": 8,
"count4": 8,
"color1": "#fdaa29",
"color2": "#45aeea",
"color3": "#8fc842",
"color4": "#d43a43"
}, {
"name": "Test Name 2",
"count": 40,
"amount": 30413,
"amount1": 12874,
"amount2": 5014,
"amount3": 4915,
"amount4": 7610,
"count1": 20,
"count2": 7,
"count3": 9,
"count4": 4,
"color1": "#fdaa29",
"color2": "#45aeea",
"color3": "#8fc842",
"color4": "#d43a43"
}, {
"name": "Test Name 3",
"count": 166,
"amount": 228353.6,
"amount1": 109492,
"amount2": 53268,
"amount3": 52860.6,
"amount4": 12733,
"count1": 51,
"count2": 57,
"count3": 46,
"count4": 12,
"color1": "#fdaa29",
"color2": "#45aeea",
"color3": "#8fc842",
"color4": "#d43a43"
}, {
"name": "Test Name 4",
"count": 15,
"amount": 61801,
"amount1": 31656,
"amount2": 15853,
"amount3": 8033,
"amount4": 6259,
"count1": 1,
"count2": 9,
"count3": 2,
"count4": 3,
"color1": "#fdaa29",
"color2": "#45aeea",
"color3": "#8fc842",
"color4": "#d43a43"
}, {
"name": "Test Name 5",
"count": 81,
"amount": 69988,
"amount1": 23040,
"amount2": 26333,
"amount3": 10791,
"amount4": 9824,
"count1": 21,
"count2": 32,
"count3": 19,
"count4": 9,
"color1": "#fdaa29",
"color2": "#45aeea",
"color3": "#8fc842",
"color4": "#d43a43"
}, {
"name": "Test Name 6",
"count": 30,
"amount": 113027,
"amount1": 56511,
"amount2": 9750,
"amount3": 34014,
"amount4": 12752,
"count1": 15,
"count2": 4,
"count3": 8,
"count4": 3,
"color1": "#fdaa29",
"color2": "#45aeea",
"color3": "#8fc842",
"color4": "#d43a43"
}, {
"name": "Test Name 7",
"count": 2,
"amount": 812,
"amount1": 0,
"amount2": 562,
"amount3": 0,
"amount4": 250,
"count1": 0,
"count2": 1,
"count3": 0,
"count4": 1,
"color1": "#fdaa29",
"color2": "#45aeea",
"color3": "#8fc842",
"color4": "#d43a43"
}, {
"name": "Test Name 8",
"count": 92,
"amount": 103502.005,
"amount1": 42177,
"amount2": 38629,
"amount3": 11338,
"amount4": 11358,
"count1": 24,
"count2": 37,
"count3": 22,
"count4": 9,
"color1": "#fdaa29",
"color2": "#45aeea",
"color3": "#8fc842",
"color4": "#d43a43"
}, {
"name": "Test Name 9",
"count": 0,
"amount": 0,
"amount1": 0,
"amount2": 0,
"amount3": 0,
"amount4": 0,
"count1": 0,
"count2": 0,
"count3": 0,
"count4": 0,
"color1": "#fdaa29",
"color2": "#45aeea",
"color3": "#8fc842",
"color4": "#d43a43",
}, {
"name": "Test Name 10",
"count": 2,
"amount": 1642.521,
"amount1": 1432.5263541,
"amount2": 210,
"amount3": 0,
"amount4": 0,
"count1": 1,
"count2": 1,
"count3": 0,
"count4": 0,
"color1": "#fdaa29",
"color2": "#45aeea",
"color3": "#8fc842",
"color4": "#d43a43",
} ]
var labelText, valueField, balloonText1, balloonText2, balloonText3, balloonText4, valueField1, valueField2, valueField3, valueField4;
labelText = "$ [[value]]";
valueField = "amount";
pieLabel = "$ [[value]]";
balloonText = "$ [[value]]";
valueField1 = "amount1";
valueField2 = "amount2";
valueField3 = "amount3";
valueField4 = "amount4";
var chart = AmCharts.makeChart( "chartdiv", {
"type": "serial",
"dataProvider": data,
"valueAxes": [ {
"stackType": "regular",
"axisAlpha": 0,
"gridAlpha": 0.1,
"unit": "$ ",
"unitPosition": "left"
} ],
"startDuration": 1,
"graphs": [ {
valueField: valueField,
labelText: labelText,
labelOffset: 20,
labelPosition: "right",
labelFunction: function( item, label ) {
return label == "$ 0" ? "" : label;
},
visibleInLegend: false,
lineAlpha: 0,
showBalloon: false,
fontSize: 13,
"precision": 2,
"decimalSeparator": ".",
"thousandsSeparator": ","
}, {
"balloonText": "<b>" + balloonText + "</b>",
"fillAlphas": 0.9,
"lineAlpha": 0,
"type": "column",
"colorField": "color1",
"valueField": valueField1,
"precision": 2,
"decimalSeparator": ".",
"thousandsSeparator": ","
}, {
"balloonText": "<b>" + balloonText + "</b>",
"fillAlphas": 0.9,
"lineAlpha": 0,
"type": "column",
"colorField": "color2",
"valueField": valueField2,
"precision": 2,
"decimalSeparator": ".",
"thousandsSeparator": ","
}, {
"balloonText": "<b>" + balloonText + "</b>",
"fillAlphas": 0.9,
"lineAlpha": 0,
"type": "column",
"colorField": "color3",
"valueField": valueField3,
"precision": 2,
"decimalSeparator": ".",
"thousandsSeparator": ","
}, {
"balloonText": "<b>" + balloonText + "</b>",
"fillAlphas": 0.9,
"lineAlpha": 0,
"type": "column",
"colorField": "color4",
"valueField": valueField4,
"precision": 2,
"decimalSeparator": ".",
"thousandsSeparator": ","
} ],
"depth3D": 15,
"fontFamily": '"Roboto",sans-serif',
"fontSize": 12,
"angle": 25,
"rotate": true,
"columnWidth": 0.7,
"categoryField": "name",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0,
"gridAlpha": 0,
"position": "left"
}
} );#chartdiv {
width: 100%;
height: 400px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>来源：https://stackoverflow.com/questions/38868003/amcharts-numberformatter-doesnt-apply-for-serial-chart