按国家划分的地理图答案

【问题标题】：geographic chart by nation按国家划分的地理图
【发布时间】：2014-03-28 09:36:57
【问题描述】：

我需要实现一个类似于地理图表的图表，它是一个按州分隔的美国图像。然后，根据每个状态的数据，图表将按颜色显示状态。例如我们有

California : 20 products
Texas: 100 products
Ohio: 5 products
.....

如果某个状态的产品数量 > 20，则以绿色显示该状态，否则以红色显示该状态

直到现在我都不知道该怎么做。我打算把美国地图分割成50个div，给它上色，但是效果不好。

【问题讨论】：

标签： javascript map charts geography

【解决方案1】：

有一些地理图表框架，例如谷歌地理图表，虽然它不是完全可定制的。

但是您可以通过使用jVectorMap 框架来做到这一点。下载jVectorMap 1.2.2，也选一些map of the USA（我用的是墨卡托，你可以使用如下代码：

<head>
    <link rel="stylesheet" href="jquery-jvectormap-1.2.2.css" type="text/css" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="jquery-jvectormap-1.2.2.min.js"></script>
    <script type="text/javascript" src="http://jvectormap.com/js/jquery-jvectormap-us-merc-en.js"></script>
    <script type="text/javascript">
    $(function(){
        var data = { "US-CA": 20, "US-TX": 100, "US-OH": 5 };
        var colors = {};
        // create an object with colors
        for (var key in data) {
            var value = data[key];
            colors[value] = value > 20 ? "#00FF00" : "#FF0000";
        }

        $('#map_canvas').vectorMap({
            map: 'us_merc_en',
            series: {
                regions: [{
                    values: data,
                    scale: colors
                }]
            }
        });
    });
    </script>
</head>
<body>
    <div id="map_canvas" style="width: 400px; height: 300px;"></div>
</body>

由于框架的一些限制，for 循环中的颜色分配部分非常棘手。它还需要对US-CA 等状态进行特殊命名。但结果你会看到绿色的德克萨斯和红色的加利福尼亚和俄亥俄。

而且该框架是开源的，如果您需要一些更复杂的功能，您可以自己更新代码。

【讨论】：