曲线图 highcharts.js
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript" src="http://s0.ifengimg.com/static/js/jquery-1.7.2.min_c4de8813.js"></script>
<style>
@charset "utf-8";
html, div, h1, h2, h3, h4, p, ul, li, img, dl, dt, dd {
margin: 0;
padding: 0;
}
img {
border: 0 none;
}
ul {
list-style: outside none none;
}
h1, h2, h3, h4 {
font-weight: normal;
}
i {
font-style: normal;
}
body {
background: #ccc none repeat scroll 0 0;
color: #000;
font: 14px/20px "微软雅黑","宋体";
text-decoration: none;
}
.reportChart {
position: relative;
width: 641px;
}
.reportNav ul {
font-size: 0;
line-height: 0;
padding-left: 5px;
word-spacing: -1px;
}
.reportNav ul li {
background: #ededed none repeat scroll 0 0;
border: 1px solid #e2d3d5;
color: #7d7d7d;
cursor: pointer;
display: inline-block;
*display:inline;
*zoom:1;
font-size: 16px;
height: 26px;
line-height: 26px;
margin-right: 4px;
text-align: center;
width: 97px;
}
.reportNav ul li.current {
background-color: #e74543;
border-color: #e74543;
color: #fff;
}
.reportCon {
overflow: hidden;
padding: 0 0 0 4px;
position: relative;
width: 641px;
}
.reportCon-chart {
background: #fff none repeat scroll 0 0;
float: left;
height: 336px;
padding-top: 10px;
width: 641px;
}
</style>
</head>
<body>
<!--通用头 start-->
<!--北京 start-->
<div class="reportChart">
<div class="reportNav">
<ul>
<li class="current">别墅</li>
<li>高端公寓</li>
</ul>
</div>
<div class="reportCon" cityid="0">
<div class="reportCon-chart"></div>
</div>
</div>
<script type="text/javascript" src="http://s0.ifengimg.com/static/js/highcharts.js"></script>
<script type="text/javascript">
var gdwy = {
init: function(){
gdwy.renderReportCon($(".reportCon").eq(0),0);
gdwy.bind();
},
bind: function(){
//选项卡点击切换
$(".reportNav").on("click", "li", function(e){
var tgt = $(e.target);
var tgtParent = tgt.parent();
var tgtParentCon = tgtParent.parent().siblings(".reportCon").eq(0);
var idx = tgt.index();
tgtParent.find("li").eq(idx).addClass("current").siblings().removeClass("current");
gdwy.renderReportCon(tgtParentCon,idx);
});
},
renderReportCon: function(target,idx){//渲染图表
var cityid = target.attr("cityid");
var data = reportData[cityid].data[idx];
target.find(".reportCon-chart").highcharts({
title: {
text: data.title,//图表名称
margin: 5,
style: { "color": "#333333", "fontSize": "18px", "fontFamily": "微软雅黑" }
},
credits: {
enabled: false // 禁用版权信息
},
xAxis: {
categories: data.xData//X轴坐标
},
yAxis: [{
min: 0,
title: {
text: data.yAverageTitle
}
}, {
title: {
text: data.yNumberTitle
},
opposite: true
}],
series: [{
type: 'column',
name: data.yNumberTitle,
data: data.yNumberData,
color: '#e74543',
yAxis: 1
}, {
type: 'spline',
name: data.yAverageTitle,
data: data.yAverageData,
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}]
});
}
};
$(document).ready(function(){
gdwy.init();
});
</script>
<script>
var reportData = [
{
city: "北京",
data: [
{
type: "所有住宅",
title: "所有住宅成交指数(北京)",
xData: ['2014.7', '2014.8', '2014.9', '2014.10', '2014.11', '2014.12', '2015.1', '2015.2', '2015.3', '2015.4', '2015.5', '2015.6', '2015.7', '2015.8'],
yAverageTitle: "均价(元/平方米)",
yAverageData: [70289, 54256, 66686, 60815, 58775, 62922, 94315, 74880 , 61617, 62718, 64327, 67040, 66333, 70592],
yNumberTitle: "成交套数(套)",
yNumberData: [85, 180, 289, 364, 328, 527, 293, 96, 189, 242, 248, 348, 328, 303]
},
{
type: "别墅",
title: "别墅成交指数(北京)",
xData: ['2014.7', '2014.8', '2014.9', '2014.10', '2014.11', '2014.12', '2015.1', '2015.2', '2015.3', '2015.4', '2015.5', '2015.6', '2015.7', '2015.8'],
yAverageTitle: "均价(元/平方米)",
yAverageData: [34165, 36584, 37897, 32544, 30866, 37888, 29888, 29070, 32811, 35266, 31687, 39901, 33613, 32565],
yNumberTitle: "成交套数(套)",
yNumberData: [174, 246, 149, 175, 163, 302, 130, 85, 129, 208, 352, 462, 389, 417]
}
]
}
];
</script>
</body>
</html>
参考网站：http://house.ifeng.com/column/report/gdwy201508
