【问题标题】:amCharts Map format currencyamCharts 地图格式货币
【发布时间】:2015-12-15 07:03:14
【问题描述】:

如何使这个 amCharts 地图将图例的最小/最大值格式化为美国货币?

var map = AmCharts.makeChart( "chartdiv", {
      type: "map",
      "theme": "light",

      colorSteps: 10,

      dataProvider: {
        map: "usaLow",
        areas: [ {
          id: "US-AL",
          value: 4447100
        }, {
          id: "US-AK",
          value: 626932
        }, {
          id: "US-AZ",
          value: 5130632
        }, {
          id: "US-AR",
          value: 2673400
        }, {
          id: "US-CA",
          value: 33871648
        }, {
          id: "US-CO",
          value: 4301261
        }, {
          id: "US-CT",
          value: 3405565
        }, {
          id: "US-DE",
          value: 783600
        }, {
          id: "US-FL",
          value: 15982378
        }, {
          id: "US-GA",
          value: 8186453
        }, {
          id: "US-HI",
          value: 1211537
        }, {
          id: "US-ID",
          value: 1293953
        }, {
          id: "US-IL",
          value: 12419293
        }, {
          id: "US-IN",
          value: 6080485
        }, {
          id: "US-IA",
          value: 2926324
        }, {
          id: "US-KS",
          value: 2688418
        }, {
          id: "US-KY",
          value: 4041769
        }, {
          id: "US-LA",
          value: 4468976
        }, {
          id: "US-ME",
          value: 1274923
        }, {
          id: "US-MD",
          value: 5296486
        }, {
          id: "US-MA",
          value: 6349097
        }, {
          id: "US-MI",
          value: 9938444
        }, {
          id: "US-MN",
          value: 4919479
        }, {
          id: "US-MS",
          value: 2844658
        }, {
          id: "US-MO",
          value: 5595211
        }, {
          id: "US-MT",
          value: 902195
        }, {
          id: "US-NE",
          value: 1711263
        }, {
          id: "US-NV",
          value: 1998257
        }, {
          id: "US-NH",
          value: 1235786
        }, {
          id: "US-NJ",
          value: 8414350
        }, {
          id: "US-NM",
          value: 1819046
        }, {
          id: "US-NY",
          value: 18976457
        }, {
          id: "US-NC",
          value: 8049313
        }, {
          id: "US-ND",
          value: 642200
        }, {
          id: "US-OH",
          value: 11353140
        }, {
          id: "US-OK",
          value: 3450654
        }, {
          id: "US-OR",
          value: 3421399
        }, {
          id: "US-PA",
          value: 12281054
        }, {
          id: "US-RI",
          value: 1048319
        }, {
          id: "US-SC",
          value: 4012012
        }, {
          id: "US-SD",
          value: 754844
        }, {
          id: "US-TN",
          value: 5689283
        }, {
          id: "US-TX",
          value: 20851820
        }, {
          id: "US-UT",
          value: 2233169
        }, {
          id: "US-VT",
          value: 608827
        }, {
          id: "US-VA",
          value: 7078515
        }, {
          id: "US-WA",
          value: 5894121
        }, {
          id: "US-WV",
          value: 1808344
        }, {
          id: "US-WI",
          value: 5363675
        }, {
          id: "US-WY",
          value: 493782
        } ]
      },

      areasSettings: {
        autoZoom: true
      },

      valueLegend: {
        right: 10,
      },

      "export": {
        "enabled": true
      }

    } );
#chartdiv {
	width	: 100%;
	height	: 500px;
}								
<script src="http://www.amcharts.com/lib/3/ammap.js"></script>
<script src="http://www.amcharts.com/lib/3/maps/js/usaLow.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>									

我目前正在将最小/最大值硬编码为美元金额,但我无法弄清楚如何使用 amCharts 自动格式化。

【问题讨论】:

    标签: amcharts ammap


    【解决方案1】:

    您可以使用值图例的minValuemaxValue 属性来设置任何格式化文本。即:

    valueLegend: {
      right: 10,
      minValue: "$0M",
      maxValue: "$3.38M"
    }
    

    要自动执行相同操作,请使用“init”事件获取最大值以及 amCharts 的全局函数 addPrefix 自动格式化值:

    "listeners": [{
      "event": "init",
      "method": function(event) {
        // find out the highest value
        var map = event.chart;
        var max = map.maxValueReal;
    
        // define function that formats currency
        function formatCurrency(val) {
          return "$" + AmCharts.addPrefix(
            val,
            map.prefixesOfBigNumbers,
            map.prefixesOfSmallNumbers, {
              precision: map.precision,
              decimalSeparator: map.decimalSeparator,
              thousandsSeparator: map.thousandsSeparator
            }
          );
        }
    
        // update value legend
        map.valueLegend.minValue = formatCurrency(0);
        map.valueLegend.maxValue = formatCurrency(max);
    
        // update the map
        map.validateNow();
      }
    }]
    

    这是working demo

    【讨论】:

      猜你喜欢
      • 2015-10-24
      • 2016-05-02
      • 1970-01-01
      • 2012-01-22
      • 1970-01-01
      • 1970-01-01
      • 2014-01-28
      • 1970-01-01
      相关资源
      最近更新 更多