<!DOCTYPE HTML>
<html lang="zh">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>房产数据</title>
<link rel="stylesheet" href="http://s0.ifengimg.com/2016/11/23/housedata_4c992f13.css">
</head>
<body>
<div class="header">
<p class="price">
最新均价(元/平) <br>
<span class="red">55706</span>
</p>
<p class="compare">
比上月 <br>
<span class="up">0.15</span>
<!--<span class="down">0.16</span>-->
</p>
<p class="note">更新于2016年11月22日</p>
</div>
<div id='canvasDiv'></div>
<script src="http://s0.ifengimg.com/static/js/jquery-1.7.2.min_c4de8813.js"></script>
<script src="http://s0.ifengimg.com/2016/11/23/ichart.1.2.1.min_f0ae4493.js"></script>
<script type="text/javascript">
$(function(){
document.documentElement.style.fontSize = document.documentElement.clientWidth/16 + 'px';
function drawLine(data) {
var winWidth = $(window).width();
var min = 999999999999;
var max = -1;
min = Math.min.apply(Math,data.flow);
max = Math.max.apply(Math,data.flow);
/*for(var i=0;i<data.flow.length;i++){
min = data.flow[i] < min ? data.flow[i] : min;
max = data.flow[i] > max ? data.flow[i] : max;
}*/
var linedata = [{
name: '单价',
value: data.flow,
color: '#f54343',
line_width: 2}
];
var chart = new iChart.LineBasic2D({
render: 'canvasDiv',
data: linedata,
align: 'center',
width: winWidth,
height: winWidth / 2,
border: null,
animation: true,
padding: 0,
sub_option: {smooth: false, point_size: 10},
coordinate: {
width: winWidth,
valid_width: (winWidth * 3 / 4),
height: (winWidth * 3 / 8),
grid_color: '#e8e8e8',
axis: {color: '#e8e8e8', width: [0, 0, 1, 0]},
grids: {horizontal: {way: 'share_alike', value: 1}},
scale: [{
position: 'left',
start_scale: (min - 1000),
end_scale: (max + 1000),
scale_space: 1000,
scale_size: 2,
scale_enable: false,
label: {color: '#4a4a4a', font: "黑体", fontsize: 12, fontweight: 600},
scale_color: '#e8e8e8'
}, {
position: 'bottom',
label: {color: '#4a4a4a', font: '微软雅黑', fontsize: 12, fontweight: 600},
scale_enable: false,
labels: data.labels
}]
}
});
chart.plugin(new iChart.Custom({
drawFn: function () {
var coo = chart.getCoordinate(),
x = coo.get('originx'),
y = coo.get('originy'),
w = coo.width, h = coo.height;
chart.target.textAlign('start')
.textBaseline('bottom')
.textFont('600 14px 微软雅黑')
//.fillText('元/㎡', x - -(winWidth - 50), y - 5, false, '#9d987a')
.textBaseline('top').fillText('(时间)', x + w + 12, y + h + 10, false, '#9d987a');
}
}));
chart.draw(data);
}
//调用绘制
var data={
flow:[33333,35555,36666,38888,39999,34444],
labels:["6月","7月","8月","9月","10月","11月"]
}
drawLine(data);
});
</script>
</body>
</html>
