没有合适的资源?快使用搜索试试~ 我知道了~
本文用实例演示如何用d3.js实现实时刷新的折线图,非常具有实用价值,需要的朋友可以参考下。
资源推荐
资源详情
资源评论
基于基于d3.js实现实时刷新的折线图实现实时刷新的折线图
本文用实例演示如何用d3.js实现实时刷新的折线图,非常具有实用价值,需要的朋友可以参考下。
先来看看效果图先来看看效果图
下面直接上源代码,下面直接上源代码,html文件文件
<html>
<head>
<meta charset="utf-8">
<title>实时刷新折线图</title>
<style>
.axis path,
.axis line{
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.overlay {
fill: none;
pointer-events: all;
}
.tooltip{
width: 150px;
height: auto;
position: absolute;
font-family: simsun;
font-size: 16px;
line-height: 26px;
text-align: left;
border: 1px solid black;
background-color: white;
border-radius: 5px;
}
.tooltip .title{
border-bottom: 1px solid #000;
text-align: center;
}
.tooltip .desColor{
width: 10px;
height: 10px;
float: left;
margin: 9px 8px 1px 8px;
}
.tooltip .desText{
display: inline;
}
.focusLine {
stroke: black;
stroke-width: 1px;
stroke-dasharray: 5,5;
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
<script src="linechart.js" charset="utf-8"></script>
<svg contentScriptType="text/ecmascript" width="2000" xmlns:xlink="http://www.w3.org/1999/xlink" zoomAndPan="magnify" style="background-color:#ffffff;" contentStyleType="text/css" viewBox="0 0 2000.0 2000.0" height="2000" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" version="1.0">
<defs>
<symbol id="fillgauge1" viewBox="0 0 500.0 300.0" preserveAspectRatio="none meet">
</symbol>
<symbol id="fillgauge2" viewBox="0 0 200.0 200.0" preserveAspectRatio="none meet">
</symbol>
</defs>
<use x="0" y="0" width="500" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#fillgauge1" xlink:type="simple" xlink:actuate="onLoad" symboltype="17" height="300" xlink:show="embed"/>
<use x="20" y="20" width="50" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#fillgauge2" xlink:type="simple" xlink:actuate="onLoad" symboltype="17" height="180" xlink:show="embed"/>
</svg>
<script>
var dataset = [
{
country: "china",
gdp: [[2000,11920],[2001,13170],[2002,14550],
[2003,16500],[2004,19440],[2005,22870],
[2006,27930],[2007,35040],[2008,45470],
[2009,51050],[2010,59490],[2011,73140],
[2012,83860],[2013,103550]]
},
{
country: "usa",
gdp: [[2000,47310],[2001,41590],[2002,39800],
[2003,43020],[2004,46550],[2005,45710],
[2006,43560],[2007,43560],[2008,48490],
[2009,50350],[2010,54950],[2011,59050],
[2012,59370],[2013,48980]]
}
];
var gauge1=loadLineChart("fillgauge1",dataset);
function NewValue(){
if(Math.random() > .5){
return Math.round(Math.random()*100);
} else {
return (Math.random()*100).toFixed(1);
}
}
function refreshLine(gauge1){
//alert("hehe");
// document.getElementById("fillgauge1").innerHTML="";
var updateData =[
{
country: "china",
gdp: [[2000,NewValue()],[2001,NewValue()],[2002,NewValue()],
[2003,NewValue()],[2004,NewValue()],[2005,NewValue()],
[2006,NewValue()],[2007,NewValue()],[2008,NewValue()],
[2009,NewValue()],[2010,NewValue()],[2011,NewValue()],
[2012,NewValue()],[2013,NewValue()]]
},
{
country: "usa",
gdp: [[2000,NewValue()],[2001,NewValue()],[2002,NewValue()],
[2003,NewValue()],[2004,NewValue()],[2005,NewValue()],
[2006,NewValue()],[2007,NewValue()],[2008,NewValue()],
[2009,NewValue()],[2010,NewValue()],[2011,NewValue()],
资源评论
weixin_38637272
- 粉丝: 4
- 资源: 936
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功