都知道echarts的图形比较煊,但是highchart也是比较实用的,速度也快
地图数据格式地址:https://data.jianshukeji.com/
地图实例:
$(function () {
$.getJSON('https://data.jianshukeji.com/jsonp?filename=geochina/anhui.json&callback=?', function (geojson) {
// Prepare the geojson
var states = Highcharts.geojson(geojson, 'map'),
rivers = Highcharts.geojson(geojson, 'mapline'),
cities = Highcharts.geojson(geojson, 'mappoint'),
specialCityLabels = {
'Melbourne': {
align: 'right'
},
'Canberra': {
align: 'right',
y: -5
},
'Wollongong': {
y: 5
},
'Brisbane': {
y: -5
}
};
// Skip or move some labels to avoid collision
$.each(states, function () {
// Disable data labels
alert(this.properties.fullname);
if (this.properties.fullname=== '合肥市') {
this.dataLabels = {
enabled: false
};
}
// Move center for data label
if (this.properties.code_hasc === 'AU.SA') {
this.middleY = 0.3;
}
if (this.properties.code_hasc === 'AU.QL') {
this.middleY = 0.7;
}
});
$.each(cities, function () {
if (specialCityLabels[this.name]) {
this.dataLabels = specialCityLabels[this.name];
}
});
// Initiate the chart
$('#container').highcharts('Map', {
title : {
text : 'Highmaps from geojson with multiple geometry types'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
series : [{
name: 'States and territories',
data: states,
color: Highcharts.getOptions().colors[2],
states: {
hover: {
color: Highcharts.getOptions().colors[4]
}
},
dataLabels: {
enabled: true,
format: '{point.name}',
style: {
width: '80px' // force line-wrap
}
},
tooltip: {
pointFormat: '{point.name}'
}
}]
});
});
});
相关推荐
highchart
highchart
index页面展示效果,使用highchart的地图下钻,地方是广西,每个市都是对应的饼图数据统计。市级可以下钻到县。 在js文件夹中有china.js(之前echart的全国地图数据),广西的地图json数据
highchart中文帮助文档
highchart api highchart api highchart api highchart api
highchart api 文档 。包含所有highchart属性。 属性结构很清晰,方便查找。
本实例源码 Highchart Demo主要讲述了使用Highchart制作图表的用法。 包括一些js配置以及接收数据格式
HighChart
matlab开发-HighChart。使用Matlab的Web浏览器可以轻松使用动态和交互式图表。
highChart gauge
highchart源码
用HighChart控件实现曲线图
highchart 3 离线 API 完整版
本实例源码 Highchart Demo主要讲述了使用Highchart制作图表的用法。 包括一些js配置以及接收数据格式
本人自己封装的jquery工具类,highChart工具类。用于动态创建highChart图表对象。方便扩展,使用
highchart使用说明,附加demo代码和使用详细过程。实现动态创建、设置图表数据。
highchart的一个例子
bootstrap+EasyUI+highchart中文参考手册,本人是后端开发,对前端不是很熟悉,所以在做项目的时候采用了这三个技术,因为是框架所以用起来开发前端很方便,果断选择,后端程序员也能开发出漂亮的前端页面了
highchart折线图,y轴双数据 代码详细注释,使用方便,可直接调用,可灵活布局 欢迎提出宝贵意见https://blog.csdn.net/weixin_43151418
echarts和highcharts全国及各省市地图,有全国、各省、所有市 json和js 地图