我已为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>
从上面的代码可以看出,我已为所有numberFormmater
字段应用了graphs
。我已在实际var labelText, valueField, balloonText1, balloonText2,
中通过UI
等变量分配值,因为此图表可以从amount
显示更改为count
显示,取自{data
1}}所以上面的设置。但是尽管如此,amount
还没有被格式化。对此的任何建议或帮助都会非常明显。
答案 0 :(得分:2)
该图表仅将数字格式应用于[[value]]
等已知元数据。您正在使用对[[amount]]
,[[amount1]]
等数据中的字段的直接引用。
图表不知道这些是否应该是数值,因此不会应用格式化 - 它们会按原样显示。
balloonText
和labelText
同样如此。
要解决此问题,只需将所有出现的元代码替换为内置[[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"
}
} );
&#13;
#chartdiv {
width: 100%;
height: 400px;
}
&#13;
<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>
&#13;