国家地理图表

我需要实现一张地理图表，这是美国各州按照州分开的图像。然后，根据每个州的数据，图表将按颜色显示状态。例如，我们有国家地理图表

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

如果产品所具有的状态数> 20，然后用绿色显示状态，否则，用红色显示它

到现在为止我没有想法如何去做吧。我打算将美国地图分成50个div并着色，但效果不好。

来源

2014-03-28 Peter Phan

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

但是，您可以通过使用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国家特殊的命名，但结果你会看到绿色的德克萨斯州和红色加利福尼亚州俄亥俄州。

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

来源

2014-03-28 12:05:38 vorrtex

非常感谢Vorrtex，这正是我正在寻找的。 –

国家地理图表

回答

相关问题