Question

我需要实施一张类似于地理图表的图表，这是一个由各州分离的美国形象。然后，根据每个州的数据，图表将按颜色显示状态。例如，我们有

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

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

到目前为止，我还没有想法如何去做。我打算将美国地图划分为50个div并对其进行着色，但它没有效果。

Answer 1

有一些地理图表框架，例如Google Geo Chart，但它不是完全可定制的。

但是你可以使用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等状态进行特殊命名。但结果你会看到绿色的德克萨斯州和红色的加州与俄亥俄州。

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

国家地理图表

1 个答案: