我们在我们的网站上实现了高图,并且最近遇到了HighMaps Beta插件,非常棒!
当我尝试将图例附加到HighMap时,我的问题出现了 . - 它将美国 Map 完全变为黑色,并且不会对状态进行适当的着色 . 但是,如果您将鼠标悬停在状态上,则会显示信息 .
- 见jFiddle:
http://jsfiddle.net/bSTB5/
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/maps/modules/map.js"></script>
<script src="http://code.highcharts.com/maps/modules/data.js"></script>
<script src="http://www.highcharts.com/samples/data/maps/us.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=us-population-density.json&callback=?', function (data) {
// Instanciate the map
$('#container').highcharts('Map', {
chart : {
borderWidth : 1
},
title : {
text : 'US population density (/km²)'
},
legend: {
layout: 'horizontal',
borderWidth: 0,
backgroundColor: 'rgba(255,255,255,0.85)',
floating: true,
verticalAlign: 'top',
y: 25
},
mapNavigation: {
enabled: true
},
colorAxis: {
min: 1,
type: 'logarithmic',
minColor: '#EEEEFF',
maxColor: '#000022',
stops: [
[0, '#EFEFFF'],
[0.67, '#4444FF'],
[1, '#000022']
]
},
series : [{
animation: true,
data : data,
mapData: Highcharts.maps.us,
joinBy: 'code',
dataLabels: {
enabled: true,
color: 'white',
format: '{point.code}',
style: {
fontWeight: 'bold',
textShadow: '0 0 3px black',
textTransform: 'uppercase'
}
},
name: 'Population density',
tooltip: {
pointFormat: '{point.code}: {point.value}/km²'
}
}]
});
});
});
如果我禁用了图例:"{enabled: false"}“然后突然美国各州的颜色正确,但我当然没有传说 .
jFiddle:http://jsfiddle.net/zmnC3/
这是我当前对我客户的演示 .
请注意,只有当我尝试按照“HighMaps Startup Guide”中所述包含js文件时才会这样做,其中说明了以下内容:
*“如果您已经在网页中安装了Highcharts并想要将Highmaps作为插件运行,请在highcharts.js之后包含此脚本标记:
“*
如果我在这个jFiddle中使用HighMap包含的文件,一切都很棒 .
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/maps/demo/color-axis/
唯一的问题是我不能在我的aspx页面中进行这种类型的包含,因为我的一些客户没有HighMap图表,如果我只显示一个包含HighChart的HighChart,那么所有HighCharts都停止工作......
我们的页面有多个客户端(有些只有高图,有些有高图和高图演示)
有人看过这个,知道如何解决它吗?
这是一个已知的bug吗?
最后,有没有人知道发布HighMaps的日期?
我们的客户渴望全力以赴!
谢谢兰斯
1 回答
是的,使用Highcharts 4.x和Highmaps 1.x时这是一个错误 . 现在使用Highcharts 3.x代替 . 见:http://jsfiddle.net/zmnC3/1/