基于d3.js实现实时刷新的折线图_d3画曲线

d3.js

156 浏览量更新于2023-03-03 评论 1 收藏 56KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

基于基于d3.js实现实时刷新的折线图实现实时刷新的折线图

本文用实例演示如何用d3.js实现实时刷新的折线图,非常具有实用价值,需要的朋友可以参考下。

先来看看效果图先来看看效果图

下面直接上源代码，下面直接上源代码，html文件文件

<html>

<head>

<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>

<defs>

</symbol>

</symbol>

</defs>

</svg>

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()],

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38637272

粉丝: 4
资源: 936

会员权益专享

基于d3.js实现实时刷新的折线图

评论0

会员权益专享

最新资源

基于d3.js实现实时刷新的折线图

评论0

d3.js实现自定义多y轴折线图的示例代码

js动态折线图

js实现前端甘特图.zip

D3.js动画效果实现: 原理与实践

D3.js网络图表的制作与优化

数据可视化：D3.js 与 Chart.js 实践

D3.js数据过滤及排序技巧: 进阶应用

结合D3.js和Ajax进行数据更新

d3.js实现2.5d城市图

基于d3.js 图谱案例

echarts使用D3.js实现3D饼图

D3.js实现拖拽生成拓扑图

用d3.js实现算法可视化网站

基于d3.js绘制一个亚洲地图

D3.js实现3D饼图

D3.js技术实现热力地图

vue3 d3.js 实现网络图

使用D3.js实现冒泡排序算法的可视化

d3.js折线图使得鼠标移到相应的位置可以出现相应的横坐标和纵坐标的内容

会员权益专享

最新资源