上头给的关于jqplot的问题暂时解决了,继续google charts。
google charts的实例很多,就以区域图(Geochart)为例~~
区域图(Geochart)是一个国家、大陆或者区域的地图,它有两种模式。
- region模式:在整个区域着色,如国家、省、州等。
- marker模式:根据指定的值使用缩放气泡标记指定的区域。
区域图使用SVG或VML展示。请注意,该地图暂时不能滚动或拖动。
region模式的例子
<html> <head> <script type='text/javascript' src='https://www.google.com/jsapi'></script> <script type='text/javascript'> google.load('visualization', '1', { 'packages': ['geochart']}); google.setOnLoadCallback(drawRegionsMap); function drawRegionsMap() { var data = google.visualization.arrayToDataTable([ ['Country', 'Popularity'], ['Germany', 200], ['United States', 300], ['Brazil', 400], ['Canada', 500], ['France', 600], ['RU', 700] ]); var options = {}; var chart = new google.visualization.GeoChart(document.getElementById('chart_div')); chart.draw(data, options); }; </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
效果如下
想要修改代码测试戳这里:代码编辑
marker模式的例子
<html> <head> <script type='text/javascript' src='https://www.google.com/jsapi'></script> <script type='text/javascript'> google.load('visualization', '1', { 'packages': ['geochart'