Difference between revisions of "Pie chart"
From JSXGraph Wiki
Jump to navigationJump to searchA WASSERMANN (talk | contribs) |
A WASSERMANN (talk | contribs) |
||
| (30 intermediate revisions by 2 users not shown) | |||
| Line 2: | Line 2: | ||
<jsxgraph width="800" height="600"> | <jsxgraph width="800" height="600"> | ||
| − | var dataArr = [30,16, | + | var dataArr = [30,16,14,10,10,8,6,6]; |
| − | var board = JXG.JSXGraph.initBoard('jxgbox', { | + | var board = JXG.JSXGraph.initBoard('jxgbox', {showNavigation:false, showCopyright:true, boundingbox: [-2.4, 8, 13.6, -4]}); |
board.containerObj.style.backgroundColor = 'black'; | board.containerObj.style.backgroundColor = 'black'; | ||
| − | + | board.options.label.strokeColor = 'yellow'; | |
| + | board.suspendUpdate(); | ||
| + | |||
var a = board.createElement('chart', dataArr, | var a = board.createElement('chart', dataArr, | ||
| − | {chartStyle:'pie', | + | {chartStyle:'pie', |
| − | fillOpacity:0. | + | colors:['#0F408D','#6F1B75','#CA147A','#DA2228','#E8801B','#FCF302','#8DC922','#15993C','#87CCEE','#0092CE'], |
| − | + | fillOpacity:0.8, center:[5,2], strokeColor:'black', highlightStrokeColor:'black', strokeWidth:4, | |
| − | + | labels:['War games','Sport games', 'Old games','Strategy games', '3D games', 'Puzzle games','Board games', 'I do not play games'], | |
| − | highlightOnSector:true, | + | highlightColors:['#E46F6A','#F9DF82','#F7FA7B','#B0D990','#69BF8E','#BDDDE4','#92C2DF','#637CB0','#AB91BC','#EB8EBF'], |
| − | gradient:'linear'} | + | highlightOnSector:true, |
| + | highlightBySize:true, | ||
| + | gradient:'linear' | ||
| + | } | ||
); | ); | ||
| + | board.unsuspendUpdate(); | ||
</jsxgraph> | </jsxgraph> | ||
===JavaScript code to produce this chart=== | ===JavaScript code to produce this chart=== | ||
| − | <source lang=" | + | <source lang="javascript"> |
| − | + | var dataArr = [30,16,14,10,10,8,6,6]; | |
| − | var dataArr = [30,16, | + | var board = JXG.JSXGraph.initBoard('jxgbox', {showNavigation:false, showCopyright:true, boundingbox: [-2.4, 8, 13.6, -4]}); |
| − | var board = JXG.JSXGraph.initBoard('jxgbox', { | ||
board.containerObj.style.backgroundColor = 'black'; | board.containerObj.style.backgroundColor = 'black'; | ||
| − | + | board.options.label.strokeColor = 'yellow'; | |
| + | board.suspendUpdate(); | ||
| + | |||
var a = board.createElement('chart', dataArr, | var a = board.createElement('chart', dataArr, | ||
{chartStyle:'pie', | {chartStyle:'pie', | ||
| − | + | colors:['#0F408D','#6F1B75','#CA147A','#DA2228','#E8801B','#FCF302','#8DC922','#15993C','#87CCEE','#0092CE'], | |
| − | fillOpacity:0. | + | fillOpacity:0.8, center:[5,2], strokeColor:'black', highlightStrokeColor:'black', strokeWidth:4, |
| − | + | labels:['War games','Sport games', 'Old games','Strategy games', '3D games', 'Puzzle games','Board games', 'I do not play games'], | |
| − | + | highlightColors:['#E46F6A','#F9DF82','#F7FA7B','#B0D990','#69BF8E','#BDDDE4','#92C2DF','#637CB0','#AB91BC','#EB8EBF'], | |
| − | highlightOnSector:true, | + | highlightOnSector:true, |
| − | gradient:'linear'} | + | highlightBySize:true, |
| + | gradient:'linear' | ||
| + | } | ||
); | ); | ||
| − | + | board.unsuspendUpdate(); | |
</source> | </source> | ||
[[Category:Examples]] | [[Category:Examples]] | ||
[[Category:Charts]] | [[Category:Charts]] | ||
Latest revision as of 17:02, 30 January 2015
A pie chart with highlight on the whole sector, enlarging labels on highlight and a gradient fill.
JavaScript code to produce this chart
var dataArr = [30,16,14,10,10,8,6,6];
var board = JXG.JSXGraph.initBoard('jxgbox', {showNavigation:false, showCopyright:true, boundingbox: [-2.4, 8, 13.6, -4]});
board.containerObj.style.backgroundColor = 'black';
board.options.label.strokeColor = 'yellow';
board.suspendUpdate();
var a = board.createElement('chart', dataArr,
{chartStyle:'pie',
colors:['#0F408D','#6F1B75','#CA147A','#DA2228','#E8801B','#FCF302','#8DC922','#15993C','#87CCEE','#0092CE'],
fillOpacity:0.8, center:[5,2], strokeColor:'black', highlightStrokeColor:'black', strokeWidth:4,
labels:['War games','Sport games', 'Old games','Strategy games', '3D games', 'Puzzle games','Board games', 'I do not play games'],
highlightColors:['#E46F6A','#F9DF82','#F7FA7B','#B0D990','#69BF8E','#BDDDE4','#92C2DF','#637CB0','#AB91BC','#EB8EBF'],
highlightOnSector:true,
highlightBySize:true,
gradient:'linear'
}
);
board.unsuspendUpdate();
