You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
265 lines
6.5 KiB
265 lines
6.5 KiB
<!DOCTYPE HTML> |
|
<html> |
|
<head> |
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
|
<title>Pie 2D</title> |
|
<style type="text/css"> |
|
@import "../../../dojo/resources/dojo.css"; |
|
@import "../../../dijit/tests/css/dijitTests.css"; |
|
</style> |
|
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug: true, async: true"></script> |
|
<script type="text/javascript"> |
|
require([ |
|
"dojox/charting/Chart", |
|
"dojox/charting/plot2d/Pie", |
|
"dojox/charting/themes/PlotKit/blue", |
|
"dojox/charting/themes/PlotKit/green", |
|
"dojox/charting/themes/PlotKit/red", |
|
"dojox/charting/themes/Adobebricks", |
|
"dojox/charting/themes/Algae", |
|
"dojox/charting/themes/Julie", |
|
"dojo/domReady!" |
|
], function(Chart, Pie, pkBlue, pkGreen, pkRed, Adobebricks, Algae, Julie){ |
|
var chart1 = new Chart("test1"); |
|
chart1.setTheme(pkBlue); |
|
chart1.addPlot("default", { |
|
type: Pie, |
|
font: "normal normal bold 12pt Tahoma", |
|
fontColor: "white", |
|
innerRadius: 33, |
|
labelOffset: 40 |
|
}); |
|
chart1.addSeries("Series A", [4, 2, 1, 1]); |
|
chart1.render(); |
|
|
|
var chart2 = new Chart("test2"); |
|
chart2.setTheme(pkBlue); |
|
chart2.addPlot("default", { |
|
type: Pie, |
|
font: "normal normal bold 12pt Tahoma", |
|
fontColor: "black", |
|
innerRadius: 33, |
|
labelOffset: -25, |
|
precision: 0 |
|
}); |
|
chart2.addSeries("Series A", [4, 2, 1, 1]); |
|
chart2.render(); |
|
|
|
var chart3 = new Chart("test3"); |
|
chart3.setTheme(pkGreen); |
|
chart3.addPlot("default", { |
|
type: Pie, |
|
font: "normal normal bold 10pt Tahoma", |
|
fontColor: "white", |
|
labelOffset: 25, |
|
innerRadius: 33, |
|
radius: 90 |
|
}); |
|
chart3.addSeries("Series A", [4, 2, 1, 1]); |
|
chart3.render(); |
|
|
|
var chart4 = new Chart("test4"); |
|
chart4.setTheme(pkGreen); |
|
chart4.addPlot("default", { |
|
type: Pie, |
|
font: "normal normal bold 10pt Tahoma", |
|
fontColor: "black", |
|
labelOffset: -25, |
|
innerRadius: 33, |
|
radius: 90 |
|
}); |
|
chart4.addSeries("Series A", [4, 2, 1, 1]); |
|
chart4.render(); |
|
|
|
var chart5 = new Chart("test5"); |
|
chart5.setTheme(pkRed); |
|
chart5.addPlot("default", { |
|
type: Pie, |
|
font: "normal normal bold 14pt Tahoma", |
|
fontColor: "white", |
|
innerRadius: 33, |
|
labelOffset: 40 |
|
}); |
|
chart5.addSeries("Series A", [{ |
|
y: 4, |
|
text: "Red" |
|
}, { |
|
y: 2, |
|
text: "Green" |
|
}, { |
|
y: 1, |
|
text: "Blue" |
|
}, { |
|
y: 1, |
|
text: "Other" |
|
}]); |
|
chart5.render(); |
|
|
|
var chart6 = new Chart("test6"); |
|
chart6.setTheme(pkRed); |
|
chart6.addPlot("default", { |
|
type: Pie, |
|
font: "normal normal bold 14pt Tahoma", |
|
fontColor: "white", |
|
labelOffset: 40, |
|
innerRadius: 33, |
|
startAngle: -45 |
|
}); |
|
chart6.addSeries("Series A", [{ |
|
y: 4, |
|
text: "Red", |
|
color: "red" |
|
}, { |
|
y: 2, |
|
text: "Green", |
|
color: "green" |
|
}, { |
|
y: 1, |
|
text: "Blue", |
|
color: "blue" |
|
}, { |
|
y: 1, |
|
text: "Other", |
|
color: "white", |
|
fontColor: "black" |
|
}]); |
|
chart6.render(); |
|
|
|
var chart7 = new Chart("test7"); |
|
chart7.setTheme(Adobebricks); |
|
chart7.addPlot("default", { |
|
type: Pie, |
|
font: "normal normal bold 12pt Tahoma", |
|
fontColor: "black", |
|
innerRadius: 33, |
|
radius: 80 |
|
}); |
|
chart7.addSeries("Series A", [4]); |
|
chart7.render(); |
|
|
|
var chart8 = new Chart("test8"); |
|
chart8.setTheme(Algae); |
|
chart8.addPlot("default", { |
|
type: Pie, |
|
font: "normal normal bold 12pt Tahoma", |
|
fontColor: "black", |
|
innerRadius: 33, |
|
radius: 80 |
|
}); |
|
chart8.addSeries("Series A", [{ |
|
y: -1, |
|
text: "Red", |
|
color: "red" |
|
}, { |
|
y: 5, |
|
text: "Green", |
|
color: "green" |
|
}, { |
|
y: 0, |
|
text: "Blue", |
|
color: "blue" |
|
}, { |
|
y: 0, |
|
text: "Other", |
|
color: "white", |
|
fontColor: "black" |
|
}]); |
|
chart8.render(); |
|
|
|
var chart9 = new Chart("test9"); |
|
chart9.setTheme(Julie); |
|
chart9.addPlot("default", { |
|
type: Pie, |
|
font: "normal normal bold 12pt Tahoma", |
|
innerRadius: 33, |
|
radius: 80 |
|
}); |
|
chart9.addSeries("Series A", []); |
|
chart9.render(); |
|
|
|
var chart10 = new Chart("test10"); |
|
chart10.setTheme(Julie); |
|
chart10.addPlot("default", { |
|
type: Pie, |
|
font: "normal normal bold 12pt Tahoma", |
|
innerRadius: 33, |
|
radius: 80, |
|
zeroDataMessage: "No Non-Zero Data" |
|
}); |
|
chart10.addSeries("Series A", []); |
|
chart10.render(); |
|
|
|
var chart11 = new Chart("test11"); |
|
chart11.setTheme(Julie); |
|
chart11.addPlot("default", { |
|
type: Pie, |
|
font: "normal normal bold 12pt Tahoma", |
|
innerRadius: 33, |
|
radius: 80, |
|
zeroDataMessage: "No Non-Zero Data" |
|
}); |
|
chart11.addSeries("Series A", [{ |
|
y: 0, |
|
text: "Red", |
|
color: "red" |
|
}, { |
|
y: 0, |
|
text: "Green", |
|
color: "green" |
|
}, { |
|
y: 0, |
|
text: "Blue", |
|
color: "blue" |
|
}, { |
|
y: 0, |
|
text: "Other", |
|
color: "white", |
|
fontColor: "black" |
|
}]); |
|
chart11.render(); |
|
}); |
|
</script> |
|
</head> |
|
<body> |
|
<h1>Pie 2D</h1> |
|
<!--<p><button onclick="makeObjects();">Go</button></p>--> |
|
<p>1: Pie with internal labels.</p> |
|
<div id="test1" style="width: 300px; height: 300px;"></div> |
|
<p>2: Pie with external labels and precision=0.</p> |
|
<div id="test2" style="width: 300px; height: 300px;"></div> |
|
<p>3/4: Two pies with internal and external labels with a constant radius.</p> |
|
<table border="1"> |
|
<tr> |
|
<td> |
|
<div id="test3" style="width: 300px; height: 300px;"></div> |
|
</td> |
|
<td> |
|
<div id="test4" style="width: 300px; height: 300px;"></div> |
|
</td> |
|
</tr> |
|
</table> |
|
<p>5/6: Pie with internal custom labels and custom colors (#6 is rotated).</p> |
|
<table border="1"> |
|
<tr> |
|
<td> |
|
<div id="test5" style="width: 300px; height: 300px;"></div> |
|
</td> |
|
<td> |
|
<div id="test6" style="width: 300px; height: 300px;"></div> |
|
</td> |
|
</tr> |
|
</table> |
|
<p>7: Degenerated pie with 1 element.</p> |
|
<div id="test7" style="width: 200px; height: 200px;"></div> |
|
<p>8: Degenerated pie with 1 positive elements (out of 5).</p> |
|
<div id="test8" style="width: 200px; height: 200px;"></div> |
|
<p>9: Pie with no data.</p> |
|
<div id="test9" style="width: 200px; height: 200px;"></div> |
|
<p>10: Pie with all data zero (no data).</p> |
|
<div id="test10" style="width: 200px; height: 200px;"></div> |
|
<p>11: Pie with all data zero (no data) and a message.</p> |
|
<div id="test11" style="width: 200px; height: 200px;"></div> |
|
<p>That's all Folks!</p> |
|
</body> |
|
</html> |
|
|
|
|