Question

如何将此图片格式设置为amCharts Map格式，将图例的最小值/最大值格式化为美元？

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自动格式化它。

Answer 1

您可以使用值图例的minValue和maxValue属性来设置任何格式化文本。即：

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。

amCharts地图格式货币

1 个答案: