Dojo 1.8 之 StoreSeries (Point Coordinate)

最新推荐文章于 2024-02-07 22:09:49 发布

haibinzhang

最新推荐文章于 2024-02-07 22:09:49 发布

阅读量816

点赞数

分类专栏： Dojo 文章标签： dojo stylesheet function query plot database

本文链接：https://blog.csdn.net/haibinzhang/article/details/7966612

版权

Dojo 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Demo: StoreSeries - Coordinate Series</title>

		<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/claro/claro.css" media="screen">
	</head>
	<body>
		<h1>Demo: StoreSeries - Coordinate Series</h1>
		<p>The chart below shows the sequence of point coordinate over a minute's time.</p>
		
		<div id="chartNode" style="width:800px;height:400px;"></div>
		<div id="legend"/>
		
		<!-- load dojo and provide config via data attribute -->
		<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/dojo.js" data-dojo-config="isDebug:1, async:1"></script>
		<script>
			
			// Require all dependencies
			require([
					"dojox/charting/Chart", 
					"dojox/charting/themes/Claro", 
					"dojo/store/Observable", 
					"dojo/store/Memory", 
					"dojox/charting/StoreSeries", 
					"dojox/charting/action2d/Tooltip",
					"dojox/charting/widget/Legend",
					"dojox/charting/plot2d/Lines", 
					"dojox/charting/axis2d/Default", 
					"dojo/domReady!"
					], function(Chart, Claro, Observable, Memory, StoreSeries, Tooltip, Legend) {
				
				// Initial data
				var data = [
					// This information, presumably, would come from a database or web service
					{ id: 1,  x: 2,  y: 20, site: 1 },
					{ id: 2,  x: 3,  y: 16, site: 1 },
					{ id: 3,  x: 5,  y: 11, site: 1 },
					{ id: 4,  x: 8,  y: 18, site: 1 },
					{ id: 5,  x: 9,  y: 26, site: 1 },
					{ id: 6,  x: 10, y: 19, site: 1 },
					{ id: 7,  x: 12, y: 20, site: 2 },
					{ id: 8,  x: 13, y: 28, site: 2 },
					{ id: 9,  x: 18, y: 12, site: 2 },
					{ id: 10, x: 21, y: 4,  site: 2 },
					{ id: 11, x: 24, y: 17, site: 2 },
					{ id: 12, x: 25, y: 6,  site: 2 }
				];
				
				
				// Create the data store
				// Store information in a data store on the client side
				var store = Observable(new Memory({
					data: {
						identifier: "id",
						label: "Site data-pair sequence",
						items: data
					}
				}));
				
				// Create the chart within it's "holding" node
				// Global so users can hit it from the console
				chart = new Chart("chartNode");

				// Set the theme
				chart.setTheme(Claro);

				// Add the only/default plot 
				chart.addPlot("default", {
					type: "Lines",
					markers: true
				});
				
				// Add axes
				chart.addAxis("x", { microTickStep: 1, minorTickStep: 1, max: 60 });
				chart.addAxis("y", { vertical: true, fixLower: "major", fixUpper: "major", minorTickStep: 1 });

				// Add tooltip for chart
				new Tooltip(chart, "default", {
					text: function( o ) {
						return "x: " + o.x + "<br />" + "y: " + o.y;
					}
				});
				
				// Add the storeseries - Query for all data
				chart.addSeries("site 1", new StoreSeries(store, { query: { site: 1 } }, { x: "x", y: "y" }));
				chart.addSeries("site 2", new StoreSeries(store, { query: { site: 2 } }, { x: "x", y: "y" }));

				// Render the chart!
				chart.render();
				
				// Add legend for chart
				var legend = new Legend({ chart: chart, horizontal: false}, 'legend');
				
				// Simulate a data chage from a store or service
				
				var startNumber = data.length, xOfSite1 = 10, xOfSite2 = 25;
				var interval = setInterval(function() {
					// Notify the store of a data change
					store.notify({ id: ++startNumber, x: ++xOfSite1, y: Math.ceil(Math.random() * 60), site: 1 });
					store.notify({ id: ++startNumber, x: ++xOfSite2, y: Math.ceil(Math.random() * 60), site: 2 });
					
					if (startNumber == 120) {
						clearInterval(interval);
					}
				},1000);
				
			});
			
		</script>
	</body>
</html>

haibinzhang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Dojo 1.8 之 StoreSeries (Point Coordinate)

Demo: StoreSeries - Coordinate Series Demo: StoreSeries - Coordinate Series The chart below shows the sequence of point coordinate over a minute's time. // Requ
复制链接

扫一扫

专栏目录