按国家划分的地理图
Posted
技术标签:
【中文标题】按国家划分的地理图【英文标题】：geographic chart by nation 【发布时间】：2014-03-28 09:36:57 【问题描述】：我需要实现一个类似于地理图表的图表，它是一个按州分隔的美国图像。然后，根据每个状态的数据，图表将按颜色显示状态。 例如我们有
California : 20 products
Texas: 100 products
Ohio: 5 products
.....
如果某个状态的产品数量 > 20，则以绿色显示该状态，否则以红色显示该状态
直到现在我都不知道该怎么做。 我打算把美国地图分割成50个div，给它上色，但是效果不好。
【问题讨论】：
【参考方案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 等状态进行特殊命名。但结果你会看到绿色的德克萨斯和红色的加利福尼亚和俄亥俄。
而且该框架是开源的，如果您需要一些更复杂的功能，您可以自己更新代码。
【讨论】：
以上是关于按国家划分的地理图的主要内容，如果未能解决你的问题，请参考以下文章