javascript - amcharts numberFormatter 不适用于串行图表

Question

我为我的 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。我通过变量赋值，如 var labelText、valueField、balloonText1、balloonText2、 等，在实际的 UI 中，因为此图可以从 amount 显示为 count 显示取自 data 所以上面的设置。但尽管如此，amount 仍未格式化。对此有任何建议或帮助都非常感谢。

Answer 1

该图表仅将数字格式应用于已知的元代码，如 [[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"
  }
} );

#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>