amcharts numberFormatter不适用于序列图 [英] amcharts numberFormatter doesn't apply for serial chart
问题描述
我为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>
从上面的代码可以看出,我为所有
graphs
字段应用了numberFormmater
.我已经在实际的UI
中通过变量在var labelText, valueField, balloonText1, balloonText2,
中为值分配了值,因为该图可以从amount
显示更改为count
显示,如data
所示.但是尽管如此,amount
仍未格式化.任何建议或帮助都将是可观的.该图表仅将数字格式应用于已知的元代码,例如[[value]]
.您正在使用对[[amount]]
,[[amount1]]
等数据中字段的直接引用.
图表不知道这些数字是否应该是数字值,因此不应用任何格式设置-它们将按原样显示.
balloonText
和labelText
也是如此.
要解决此问题,只需将所有出现的thos元代码替换为内置的[[value]]
.图表将为每个图表分别使用格式值替换它:
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>
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.
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>
这篇关于amcharts numberFormatter不适用于序列图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!