Difference between revisions of "Pie chart II"

From JSXGraph Wiki
Jump to navigationJump to search
 
 
(12 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<jsxgraph width="700" height="600">
 
<jsxgraph width="700" height="600">
−
var board = JXG.JSXGraph.initBoard('box', {originX: 50, originY: 450, unitX: 50, unitY: 50, axis:true});
+
var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 50, originY: 450, unitX: 50, unitY: 50, axis:true});
 
board.suspendUpdate();
 
board.suspendUpdate();
  
−
var s = board.createElement('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()*2).toFixed(2);},
+
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()*2).toFixed(2);},
+
function(){return (s.Value()*3).toFixed(2);},
−
  function(){return (s.Value()*2).toFixed(2);},
+
function(){return (s.Value()*4).toFixed(2);},
−
  function(){return (s.Value()*2).toFixed(2);},
+
function(){return 4;},
−
  function(){return (s.Value()*2).toFixed(2);},
+
function(){return 2;},
−
  function(){return (s.Value()*2).toFixed(2);},
+
function(){return 1;},
−
  function(){return (s.Value()*2).toFixed(2);},
+
function(){return 1.2;},
−
  function(){return (s.Value()*2).toFixed(2);},
+
function(){return 3;},
−
  function(){return (s.Value()*2).toFixed(2);},
+
function(){return 1;},
−
  function(){return (s.Value()*2).toFixed(2);}
+
function(){return 1.7;}
−
  ];
+
];
  
−
var a = board.createElement('chart', [f],
+
var a = board.create('chart', [f],
 
{chartStyle:'pie',
 
{chartStyle:'pie',
 
colorArray:
 
colorArray:
Line 30: Line 30:
 
board.unsuspendUpdate();
 
board.unsuspendUpdate();
 
</jsxgraph>
 
</jsxgraph>
 +
 +
===The underlying JavaScript code===
 +
<source lang="javascript">
 +
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();
 +
</source>
 +
 +
[[Category:Examples]]

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();
Retrieved from "http://jsxgraph.org/wiki/index.php?title=Pie_chart_II&oldid=6880"