86 lines
3.2 KiB
HTML
86 lines
3.2 KiB
HTML
<!--[if IE 7]>
|
|
<!DOCTYPE>
|
|
<html lang="en">
|
|
<head>
|
|
<![endif]-->
|
|
<!--[if IE 8]>
|
|
<!DOCTYPE>
|
|
<html lang="en">
|
|
<head>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
|
|
<![endif]-->
|
|
<![if gte IE 9]>
|
|
<!DOCTYPE HTML>
|
|
<html lang="en">
|
|
<head>
|
|
<![endif]>
|
|
<title>Gradient: Scatter #1</title>
|
|
<script type="text/javascript" src="../../../../dojo/dojo.js" djConfig="isDebug: true"></script>
|
|
<script>
|
|
dojo.require("dojox.charting.Chart");
|
|
dojo.require("dojox.charting.axis2d.Default");
|
|
dojo.require("dojox.charting.plot2d.Scatter");
|
|
|
|
run = function(){
|
|
dojo.attr("start", "disabled", true);
|
|
|
|
var theme1 = new dojox.charting.Theme({
|
|
seriesThemes: [
|
|
{
|
|
fill: {
|
|
type: "linear", space: "plot", x1: 0, y1: 0, x2: 100, y2: 0,
|
|
colors: [{ offset: 0, color: "#ed0" }, { offset: 0.5, color: "#eda" }, { offset: 1, color: "#ed0" }]
|
|
}
|
|
},
|
|
{
|
|
fill: {
|
|
type: "linear", space: "plot", x1: 0, y1: 0, x2: 100, y2: 0,
|
|
colors: [{ offset: 0, color: "#e00" }, { offset: 0.5, color: "#eaa" }, { offset: 1, color: "#e00" }]
|
|
}
|
|
},
|
|
{
|
|
fill: {
|
|
type: "linear", space: "plot", x1: 0, y1: 0, x2: 100, y2: 0,
|
|
colors: [{ offset: 0, color: "#0e0" }, { offset: 0.5, color: "#aea" }, { offset: 1, color: "#0e0" }]
|
|
}
|
|
},
|
|
{
|
|
fill: {
|
|
type: "linear", space: "plot", x1: 0, y1: 0, x2: 100, y2: 0,
|
|
colors: [{ offset: 0, color: "#00e" }, { offset: 0.5, color: "#aae" }, { offset: 1, color: "#00e" }]
|
|
}
|
|
}
|
|
]
|
|
});
|
|
|
|
var run1 = [], run2 = [], run3 = [];
|
|
for(var i = 0; i < 12; ++i){
|
|
for(var j = 0; j < 8; ++j){
|
|
run1.push({x: i + 0.7, y: j + 0.7});
|
|
run2.push({x: i + 1.3, y: j + 1.3});
|
|
run3.push({x: i + 0.7, y: j + 1.3});
|
|
}
|
|
}
|
|
|
|
var chart1 = new dojox.charting.Chart("c1").
|
|
setTheme(theme1).
|
|
addAxis("x", {includeZero: true, minorLabels: false}).
|
|
addAxis("y", {vertical: true, includeZero: true, minorLabels: false}).
|
|
addPlot("default", {type: "Scatter"}).
|
|
addSeries("Series A", run1).
|
|
addSeries("Series B", run2).
|
|
addSeries("Series C", run3).
|
|
render();
|
|
};
|
|
|
|
dojo.addOnLoad(run);
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<p><button id="start" onclick="run();">Start!</button></p>
|
|
<h1>plot-space left-to-right gradient</h1>
|
|
<p>Scatter</p>
|
|
<div id="c1" style="position: relative; width: 600px; height: 400px;"></div>
|
|
</body>
|
|
</html>
|