做图表插件的各种地址:
http://code.google.com/intl/zh-CN/apis/chart/docs/gallery/scatter_charts.html
http://www.open-lib.com/Type/164-1.jsp
http://home.open-open.com/space-668-do-blog-id-1453.html
该例子来源:http://hi.baidu.com/qinzhiyang/blog/item/4abcfdfa0700e8cfb58f3169.html
<html>
<head>
<script type="text/javascript" src="</script'>https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', '交易日期(月)');
data.addColumn('number', '交易单价(万/平方米)');
data.addColumn('number', '挂牌单价(万/平方米)');
data.addRows(12);
data.setValue(0, 0, 1);
data.setValue(0, 1, 10000);
data.setValue(0, 2, 20000);
data.setValue(1, 0, 2);
data.setValue(1, 1, 20000);
data.setValue(1, 2, 30000);
data.setValue(2, 0, 3);
data.setValue(2, 1, 30000);
data.setValue(2, 2, 40000);
data.setValue(3, 0, 4);
data.setValue(3, 1, 40000);
data.setValue(3, 2, 50000);
data.setValue(4, 0, 5);
data.setValue(4, 1, 50000);
data.setValue(4, 2, 45000);
data.setValue(5, 0, 6);
data.setValue(5, 1, 25000);
data.setValue(5, 2, 10000);
data.setValue(6, 0, 1);
data.setValue(6, 1, 10000);
data.setValue(6, 2, 20000);
data.setValue(7, 0, 2);
data.setValue(7, 1, 20000);
data.setValue(7, 2, 30000);
data.setValue(8, 0, 3);
data.setValue(8, 1, 30000);
data.setValue(8, 2, 40000);
data.setValue(9, 0, 4);
data.setValue(9, 1, 40000);
data.setValue(9, 2, 50000);
data.setValue(10, 0, 5);
data.setValue(10, 1, 50000);
data.setValue(10, 2, 45000);
data.setValue(11, 0, 6);
data.setValue(11, 1, 25000);
data.setValue(11, 2, 10000);
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, {width: 600, height: 300,
title: '价格分布图',
titlePosition: 'none',
titleTextStyle: {color: 'black', fontSize: 18},
hAxis: {title: '交易日期', minValue: 1, maxValue: 12, textStyle: {fontName: 'Tahoma', fontSize: 14}},
vAxis: {title: '单价', minValue: 0, maxValue: 50000, textStyle: {fontName: 'Tahoma', fontSize: 14}},
legend: 'bottom',
axisTitlesPosition: 'out', //坐标轴标题位于图表外侧
//axisTitlesPosition: 'in' //坐标轴标题位于图表内测
//axisTitlesPosition: 'none' //没有坐标轴标题
//backgroundColor: 'red' //背景颜色
//backgroundColor: '#00cc00' //背景颜色
colors:['#B94643','#BFFF2F'],
pointSize:12
});
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>