Javascript 国家地理图
我需要实现一个类似于地理图的图表，这是一个由各州分开的美国图像。然后，根据每个状态的数据，图表将按颜色显示状态。 例如我们有Javascript 国家地理图,javascript,map,charts,geography,Javascript,Map,Charts,Geography,我需要实现一个类似于地理图的图表，这是一个由各州分开的美国图像。然后，根据每个状态的数据，图表将按颜色显示状态。 例如我们有 California : 20 products Texas: 100 products Ohio: 5 products ..... 如果某个状态的产品数量>20，则以绿色显示该状态，否则以红色显示该状态 直到现在我还不知道怎么做。 我打算将美国地图分为50个部分并涂上颜色，但效果不佳。有一些地理图表框架，例如谷歌地理图表，但它不是完全可定制的 但是您可以通过使用该框
California : 20 products
Texas: 100 products
Ohio: 5 products
.....
我打算将美国地图分为50个部分并涂上颜色，但效果不佳。有一些地理图表框架，例如谷歌地理图表，但它不是完全可定制的 但是您可以通过使用该框架来实现这一点。下载jVectorMap 1.2.2，也选择一些（我使用了Mercator，您可以使用以下代码：
<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>
$（函数（）{
var数据={“US-CA”：20，“US-TX”：100，“US-OH”：5}；
var colors={}；
//使用颜色创建对象
for（var输入数据）{
var值=数据[键]；
颜色[值]=值>20？”#00FF00:“#FF0000”；
}
$（'map#u canvas'）。矢量地图({
地图：“美国商业”，
系列：{
区域：[{
值：数据，
比例：颜色
}]
}
});
});
US-CA