Difference between revisions of "Pie chart II"
From JSXGraph Wiki
Jump to navigationJump to searchA WASSERMANN (talk | contribs) |
A WASSERMANN (talk | contribs) |
||
Line 5: | Line 5: | ||
var s = board.create('slider', [[8,7],[11,7],[1,1,1.5]],{name:'S',strokeColor:'black',fillColor:'white'}); | var s = board.create('slider', [[8,7],[11,7],[1,1,1.5]],{name:'S',strokeColor:'black',fillColor:'white'}); | ||
var f = [function(){return (s.Value()*1).toFixed(2);}, | var f = [function(){return (s.Value()*1).toFixed(2);}, | ||
− | function(){return (s.Value()* | + | function(){return (s.Value()*2).toFixed(2);}, |
− | function(){return (s.Value()* | + | function(){return (s.Value()*3).toFixed(2);}, |
− | function(){return (s.Value()* | + | function(){return (s.Value()*4).toFixed(2);}, |
function(){return 4;}, | function(){return 4;}, | ||
function(){return 2;}, | function(){return 2;}, | ||
Line 37: | Line 37: | ||
var s = board.create('slider', [[8,7],[11,7],[1,1,1.5]],{name:'S',strokeColor:'black',fillColor:'white'}); | var s = board.create('slider', [[8,7],[11,7],[1,1,1.5]],{name:'S',strokeColor:'black',fillColor:'white'}); | ||
− | var f = [function(){return (s.Value()* | + | var f = [function(){return (s.Value()*1).toFixed(2);}, |
− | |||
function(){return (s.Value()*2).toFixed(2);}, | function(){return (s.Value()*2).toFixed(2);}, | ||
− | function(){return (s.Value()* | + | function(){return (s.Value()*3).toFixed(2);}, |
− | function(){return (s.Value()* | + | function(){return (s.Value()*4).toFixed(2);}, |
− | function(){return | + | function(){return 4;}, |
− | function(){return | + | function(){return 2;}, |
− | function(){return | + | function(){return 1;}, |
− | function(){return | + | function(){return 1.2;}, |
− | function(){return | + | function(){return 3;}, |
− | function(){return | + | function(){return 1;}, |
+ | function(){return 1.7;} | ||
]; | ]; | ||
− | var a = board.create('chart', [ | + | var a = board.create('chart', [f], |
− | + | { | |
− | + | chartStyle:'pie', | |
− | ['#0F408D','#6F1B75','#CA147A','#DA2228','#E8801B','#FCF302','#8DC922','#15993C','#87CCEE','#0092CE','#CA147A'], | + | colorArray: ['#0F408D','#6F1B75','#CA147A','#DA2228','#E8801B','#FCF302','#8DC922','#15993C','#87CCEE','#0092CE','#CA147A'], |
− | center:[5,2], strokeColor:'black', highlightStrokeColor:'black', | + | center:[5,2], |
− | strokeWidth:4, | + | strokeColor:'black', |
− | + | highlightStrokeColor:'black', | |
− | ['#E46F6A','#F9DF82','#F7FA7B','#B0D990','#69BF8E','#BDDDE4','#92C2DF','#637CB0','#AB91BC','#EB8EBF','#B0D990'], | + | strokeWidth:4, |
− | + | highlightColorArray:['#E46F6A','#F9DF82','#F7FA7B','#B0D990','#69BF8E','#BDDDE4','#92C2DF','#637CB0','#AB91BC','#EB8EBF','#B0D990'], | |
− | + | highlightOnSector:true | |
+ | }); | ||
board.unsuspendUpdate(); | board.unsuspendUpdate(); |
Latest revision as of 13:04, 17 March 2020
The underlying JavaScript code
var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 50, originY: 450, unitX: 50, unitY: 50, axis:true});
board.suspendUpdate();
var s = board.create('slider', [[8,7],[11,7],[1,1,1.5]],{name:'S',strokeColor:'black',fillColor:'white'});
var f = [function(){return (s.Value()*1).toFixed(2);},
function(){return (s.Value()*2).toFixed(2);},
function(){return (s.Value()*3).toFixed(2);},
function(){return (s.Value()*4).toFixed(2);},
function(){return 4;},
function(){return 2;},
function(){return 1;},
function(){return 1.2;},
function(){return 3;},
function(){return 1;},
function(){return 1.7;}
];
var a = board.create('chart', [f],
{
chartStyle:'pie',
colorArray: ['#0F408D','#6F1B75','#CA147A','#DA2228','#E8801B','#FCF302','#8DC922','#15993C','#87CCEE','#0092CE','#CA147A'],
center:[5,2],
strokeColor:'black',
highlightStrokeColor:'black',
strokeWidth:4,
highlightColorArray:['#E46F6A','#F9DF82','#F7FA7B','#B0D990','#69BF8E','#BDDDE4','#92C2DF','#637CB0','#AB91BC','#EB8EBF','#B0D990'],
highlightOnSector:true
});
board.unsuspendUpdate();