wellton/Chart-js
1
0
Fork 0
Código Issues Pull Requests Ações Pacotes Projetos Versões Wiki Atividade

Revert "Merge pull request #856 from tannerlinsley/editable-chart-config"

Ver Código-Fonte 
This reverts commit a8063de6b8, reversing
changes made to 7f513b87ee.
Esse commit está contido em:
Tanner Linsley
2015-05-11 18:57:14 -06:00
pai 4e3dd8ae3f
commit b8691c9581
11 arquivos alterados com 24 adições e 222 exclusões
Baixar Arquivo de Patch Baixar Arquivo de Diff Expandir todos os arquivos Colapsar todos os arquivos
samples/bar.html
+1 -13
Ver Arquivo
@@ -3,17 +3,15 @@
<head> <head>
<title>Bar Chart</title> <title>Bar Chart</title>
<script src="../Chart.js"></script> <script src="../Chart.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head> </head>
<body> <body>
<div style="width: 50%"> <div style="width: 50%">
<canvas id="canvas" height="450" width="600"></canvas> <canvas id="canvas" height="450" width="600"></canvas>
</div> </div>
<button id="randomizeData">Randomize Data</button>
<script> <script>
var randomScalingFactor = function(){ return Math.round(Math.random()*100)}; var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var randomColorFactor = function(){ return Math.round(Math.random()*255)};
var barChartData = { var barChartData = {
labels : ["January","February","March","April","May","June","July"], labels : ["January","February","March","April","May","June","July"],
@@ -42,16 +40,6 @@
}); });
} }
$('#randomizeData').click(function(){
barChartData.datasets[0].fillColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
barChartData.datasets[0].data = [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()];
barChartData.datasets[1].fillColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
barChartData.datasets[1].data = [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()];
window.myBar.update();
});
</script> </script>
</body> </body>
</html> </html>
samples/doughnut.html
+5 -18
Ver Arquivo
@@ -3,7 +3,6 @@
<head> <head>
<title>Doughnut Chart</title> <title>Doughnut Chart</title>
<script src="../Chart.js"></script> <script src="../Chart.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style> <style>
body{ body{
padding: 0; padding: 0;
@@ -18,41 +17,37 @@
<div id="canvas-holder"> <div id="canvas-holder">
<canvas id="chart-area" width="500" height="500"/> <canvas id="chart-area" width="500" height="500"/>
</div> </div>
<button id="randomizeData">Randomize Data</button>
<script> <script>
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var randomColorFactor = function(){ return Math.round(Math.random()*255)};
var doughnutData = [ var doughnutData = [
{ {
value: randomScalingFactor(), value: 300,
color:"#F7464A", color:"#F7464A",
highlight: "#FF5A5E", highlight: "#FF5A5E",
label: "Red" label: "Red"
}, },
{ {
value: randomScalingFactor(), value: 50,
color: "#46BFBD", color: "#46BFBD",
highlight: "#5AD3D1", highlight: "#5AD3D1",
label: "Green" label: "Green"
}, },
{ {
value: randomScalingFactor(), value: 100,
color: "#FDB45C", color: "#FDB45C",
highlight: "#FFC870", highlight: "#FFC870",
label: "Yellow" label: "Yellow"
}, },
{ {
value: randomScalingFactor(), value: 40,
color: "#949FB1", color: "#949FB1",
highlight: "#A8B3C5", highlight: "#A8B3C5",
label: "Grey" label: "Grey"
}, },
{ {
value: randomScalingFactor(), value: 120,
color: "#4D5360", color: "#4D5360",
highlight: "#616774", highlight: "#616774",
label: "Dark Grey" label: "Dark Grey"
@@ -65,14 +60,6 @@
window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true}); window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true});
}; };
$('#randomizeData').click(function(){
$.each(doughnutData, function(i, piece){
doughnutData[i].value = randomScalingFactor();
doughnutData[i].color = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
});
window.myDoughnut.update();
});
</script> </script>
samples/line.html
-14
Ver Arquivo
@@ -3,7 +3,6 @@
<head> <head>
<title>Line Chart</title> <title>Line Chart</title>
<script src="../Chart.js"></script> <script src="../Chart.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head> </head>
<body> <body>
<div style="width:30%"> <div style="width:30%">
@@ -11,13 +10,10 @@
<canvas id="canvas" height="450" width="600"></canvas> <canvas id="canvas" height="450" width="600"></canvas>
</div> </div>
</div> </div>
<button id="randomizeData">Randomize Data</button>
<script> <script>
var randomScalingFactor = function(){ return Math.round(Math.random()*100)}; var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var randomColorFactor = function(){ return Math.round(Math.random()*255)};
var lineChartData = { var lineChartData = {
labels : ["January","February","March","April","May","June","July"], labels : ["January","February","March","April","May","June","July"],
datasets : [ datasets : [
@@ -52,16 +48,6 @@
}); });
} }
$('#randomizeData').click(function(){
lineChartData.datasets[0].fillColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.3)';
lineChartData.datasets[0].data = [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()];
lineChartData.datasets[1].fillColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.3)';
lineChartData.datasets[1].data = [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()];
window.myLine.update();
});
</script> </script>
</body> </body>
samples/pie.html
+6 -18
Ver Arquivo
@@ -3,46 +3,42 @@
<head> <head>
<title>Pie Chart</title> <title>Pie Chart</title>
<script src="../Chart.js"></script> <script src="../Chart.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head> </head>
<body> <body>
<div id="canvas-holder"> <div id="canvas-holder">
<canvas id="chart-area" width="300" height="300"/> <canvas id="chart-area" width="300" height="300"/>
</div> </div>
<button id="randomizeData">Randomize Data</button>
<script> <script>
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var randomColorFactor = function(){ return Math.round(Math.random()*255)};
var pieData = [ var pieData = [
{ {
value: randomScalingFactor(), value: 300,
color:"#F7464A", color:"#F7464A",
highlight: "#FF5A5E", highlight: "#FF5A5E",
label: "Red" label: "Red"
}, },
{ {
value: randomScalingFactor(), value: 50,
color: "#46BFBD", color: "#46BFBD",
highlight: "#5AD3D1", highlight: "#5AD3D1",
label: "Green" label: "Green"
}, },
{ {
value: randomScalingFactor(), value: 100,
color: "#FDB45C", color: "#FDB45C",
highlight: "#FFC870", highlight: "#FFC870",
label: "Yellow" label: "Yellow"
}, },
{ {
value: randomScalingFactor(), value: 40,
color: "#949FB1", color: "#949FB1",
highlight: "#A8B3C5", highlight: "#A8B3C5",
label: "Grey" label: "Grey"
}, },
{ {
value: randomScalingFactor(), value: 120,
color: "#4D5360", color: "#4D5360",
highlight: "#616774", highlight: "#616774",
label: "Dark Grey" label: "Dark Grey"
@@ -55,14 +51,6 @@
window.myPie = new Chart(ctx).Pie(pieData); window.myPie = new Chart(ctx).Pie(pieData);
}; };
$('#randomizeData').click(function(){
$.each(pieData, function(i, piece){
pieData[i].value = randomScalingFactor();
pieData[i].color = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
});
window.myPie.update();
});
</script> </script>
samples/polar-area.html
+5 -18
Ver Arquivo
@@ -3,47 +3,42 @@
<head> <head>
<title>Polar Area Chart</title> <title>Polar Area Chart</title>
<script src="../Chart.js"></script> <script src="../Chart.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head> </head>
<body> <body>
<div id="canvas-holder" style="width:30%"> <div id="canvas-holder" style="width:30%">
<canvas id="chart-area" width="300" height="300"/> <canvas id="chart-area" width="300" height="300"/>
</div> </div>
<button id="randomizeData">Randomize Data</button>
<script> <script>
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var randomColorFactor = function(){ return Math.round(Math.random()*255)};
var polarData = [ var polarData = [
{ {
value: randomScalingFactor(), value: 300,
color:"#F7464A", color:"#F7464A",
highlight: "#FF5A5E", highlight: "#FF5A5E",
label: "Red" label: "Red"
}, },
{ {
value: randomScalingFactor(), value: 50,
color: "#46BFBD", color: "#46BFBD",
highlight: "#5AD3D1", highlight: "#5AD3D1",
label: "Green" label: "Green"
}, },
{ {
value: randomScalingFactor(), value: 100,
color: "#FDB45C", color: "#FDB45C",
highlight: "#FFC870", highlight: "#FFC870",
label: "Yellow" label: "Yellow"
}, },
{ {
value: randomScalingFactor(), value: 40,
color: "#949FB1", color: "#949FB1",
highlight: "#A8B3C5", highlight: "#A8B3C5",
label: "Grey" label: "Grey"
}, },
{ {
value: randomScalingFactor(), value: 120,
color: "#4D5360", color: "#4D5360",
highlight: "#616774", highlight: "#616774",
label: "Dark Grey" label: "Dark Grey"
@@ -58,14 +53,6 @@
}); });
}; };
$('#randomizeData').click(function(){
$.each(polarData, function(i, piece){
polarData[i].value = randomScalingFactor();
polarData[i].color = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
});
window.myPolarArea.update();
});
</script> </script>
samples/radar.html
+7 -18
Ver Arquivo
@@ -3,20 +3,19 @@
<head> <head>
<title>Radar Chart</title> <title>Radar Chart</title>
<script src="../Chart.js"></script> <script src="../Chart.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
<style>
canvas{
}
</style>
</head> </head>
<body> <body>
<div style="width:30%"> <div style="width:30%">
<canvas id="canvas" height="450" width="450"></canvas> <canvas id="canvas" height="450" width="450"></canvas>
</div> </div>
<button id="randomizeData">Randomize Data</button>
<script> <script>
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var randomColorFactor = function(){ return Math.round(Math.random()*255)};
var radarChartData = { var radarChartData = {
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"], labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
datasets: [ datasets: [
@@ -28,7 +27,7 @@
pointStrokeColor: "#fff", pointStrokeColor: "#fff",
pointHighlightFill: "#fff", pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)", pointHighlightStroke: "rgba(220,220,220,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()] data: [65,59,90,81,56,55,40]
}, },
{ {
label: "My Second dataset", label: "My Second dataset",
@@ -38,7 +37,7 @@
pointStrokeColor: "#fff", pointStrokeColor: "#fff",
pointHighlightFill: "#fff", pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)", pointHighlightStroke: "rgba(151,187,205,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()] data: [28,48,40,19,96,27,100]
} }
] ]
}; };
@@ -49,16 +48,6 @@
}); });
} }
$('#randomizeData').click(function(){
radarChartData.datasets[0].fillColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.3)';
radarChartData.datasets[0].data = [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()];
radarChartData.datasets[1].fillColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.3)';
radarChartData.datasets[1].data = [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()];
window.myRadar.update();
});
</script> </script>
</body> </body>
</html> </html>
src/Chart.Bar.js
-26
Ver Arquivo
@@ -48,9 +48,6 @@
defaults : defaultConfig, defaults : defaultConfig,
initialize: function(data){ initialize: function(data){
// Save data as a source for updating of values & methods
this.data = data;
//Expose options as a scope variable here so we can access it in the ScaleClass //Expose options as a scope variable here so we can access it in the ScaleClass
var options = this.options; var options = this.options;
@@ -143,29 +140,6 @@
this.render(); this.render();
}, },
update : function(){ update : function(){
//Iterate through each of the datasets, and build this into a property of the chart
helpers.each(this.data.datasets,function(dataset,datasetIndex){
helpers.extend(this.datasets[datasetIndex], {
label : dataset.label || null,
fillColor : dataset.fillColor,
strokeColor : dataset.strokeColor,
});
helpers.each(dataset.data,function(dataPoint,index){
helpers.extend(this.datasets[datasetIndex].bars[index], {
value : dataPoint,
label : this.data.labels[index],
datasetLabel: dataset.label,
strokeColor : dataset.strokeColor,
fillColor : dataset.fillColor,
highlightFill : dataset.highlightFill || dataset.fillColor,
highlightStroke : dataset.highlightStroke || dataset.strokeColor
});
},this);
},this);
this.scale.update(); this.scale.update();
// Reset any highlight colours before updating. // Reset any highlight colours before updating.
helpers.each(this.activeElements, function(activeElement){ helpers.each(this.activeElements, function(activeElement){
src/Chart.Doughnut.js
-22
Ver Arquivo
@@ -45,9 +45,6 @@
//Config is automatically merged by the core of Chart.js, and is available at this.options //Config is automatically merged by the core of Chart.js, and is available at this.options
initialize: function(data){ initialize: function(data){
// Save data as a source for updating of values & methods
this.data = data;
//Declare segments as a static property to prevent inheriting across the Chart type prototype //Declare segments as a static property to prevent inheriting across the Chart type prototype
this.segments = []; this.segments = [];
this.outerRadius = (helpers.min([this.chart.width,this.chart.height]) - this.options.segmentStrokeWidth/2)/2; this.outerRadius = (helpers.min([this.chart.width,this.chart.height]) - this.options.segmentStrokeWidth/2)/2;
@@ -127,25 +124,6 @@
},this); },this);
}, },
update : function(){ update : function(){
// Map new data to data points
if(this.data.length == this.segments.length){
helpers.each(this.data, function(segment, i){
helpers.extend(this.segments[i], {
value : segment.value,
fillColor : segment.color,
highlightColor : segment.highlight || segment.color,
showStroke : this.options.segmentShowStroke,
strokeWidth : this.options.segmentStrokeWidth,
strokeColor : this.options.segmentStrokeColor,
label : segment.label
});
}, this);
} else{
// Data size changed without properly inserting, just redraw the chart
this.initialize(this.data);
}
this.calculateTotal(this.segments); this.calculateTotal(this.segments);
// Reset any highlight colours before updating. // Reset any highlight colours before updating.
src/Chart.Line.js
-28
Ver Arquivo
@@ -62,9 +62,6 @@
name: "Line", name: "Line",
defaults : defaultConfig, defaults : defaultConfig,
initialize: function(data){ initialize: function(data){
// Save data as a source for updating of values & methods
this.data = data;
//Declare the extension of the default point, to cater for the options passed in to the constructor //Declare the extension of the default point, to cater for the options passed in to the constructor
this.PointClass = Chart.Point.extend({ this.PointClass = Chart.Point.extend({
offsetGridLines : this.options.offsetGridLines, offsetGridLines : this.options.offsetGridLines,
@@ -140,31 +137,6 @@
this.render(); this.render();
}, },
update : function(){ update : function(){
//Iterate through each of the datasets, and build this into a property of the chart
helpers.each(this.data.datasets,function(dataset,datasetIndex){
helpers.extend(this.datasets[datasetIndex], {
label : dataset.label || null,
fillColor : dataset.fillColor,
strokeColor : dataset.strokeColor,
pointColor : dataset.pointColor,
pointStrokeColor : dataset.pointStrokeColor,
});
helpers.each(dataset.data,function(dataPoint,index){
helpers.extend(this.datasets[datasetIndex].points[index], {
value : dataPoint,
label : this.data.labels[index],
datasetLabel: dataset.label,
strokeColor : dataset.pointStrokeColor,
fillColor : dataset.pointColor,
highlightFill : dataset.pointHighlightFill || dataset.pointColor,
highlightStroke : dataset.pointHighlightStroke || dataset.pointStrokeColor
});
},this);
},this);
this.scale.update(); this.scale.update();
// Reset any highlight colours before updating. // Reset any highlight colours before updating.
helpers.each(this.activeElements, function(activeElement){ helpers.each(this.activeElements, function(activeElement){
src/Chart.PolarArea.js
-19
Ver Arquivo
@@ -59,9 +59,6 @@
//Initialize is fired when the chart is initialized - Data is passed in as a parameter //Initialize is fired when the chart is initialized - Data is passed in as a parameter
//Config is automatically merged by the core of Chart.js, and is available at this.options //Config is automatically merged by the core of Chart.js, and is available at this.options
initialize: function(data){ initialize: function(data){
// Save data as a source for updating of values & methods
this.data = data;
this.segments = []; this.segments = [];
//Declare segment class as a chart instance specific class, so it can share props for this instance //Declare segment class as a chart instance specific class, so it can share props for this instance
this.SegmentArc = Chart.Arc.extend({ this.SegmentArc = Chart.Arc.extend({
@@ -193,22 +190,6 @@
}, },
update : function(){ update : function(){
// Map new data to data points
if(this.data.length == this.segments.length){
helpers.each(this.data, function(segment, i){
helpers.extend(this.segments[i], {
fillColor: segment.color,
highlightColor: segment.highlight || segment.color,
label: segment.label,
value: segment.value,
});
},this);
} else{
// Data size changed without properly inserting, just redraw the chart
this.initialize(this.data);
}
this.calculateTotal(this.segments); this.calculateTotal(this.segments);
helpers.each(this.segments,function(segment){ helpers.each(this.segments,function(segment){
src/Chart.Radar.js
-28
Ver Arquivo
@@ -67,9 +67,6 @@
}, },
initialize: function(data){ initialize: function(data){
// Save data as a source for updating of values & methods
this.data = data;
this.PointClass = Chart.Point.extend({ this.PointClass = Chart.Point.extend({
strokeWidth : this.options.pointDotStrokeWidth, strokeWidth : this.options.pointDotStrokeWidth,
radius : this.options.pointDotRadius, radius : this.options.pointDotRadius,
@@ -272,31 +269,6 @@
this.update(); this.update();
}, },
update : function(){ update : function(){
//Iterate through each of the datasets, and build this into a property of the chart
helpers.each(this.data.datasets,function(dataset,datasetIndex){
helpers.extend(this.datasets[datasetIndex], {
label : dataset.label || null,
fillColor : dataset.fillColor,
strokeColor : dataset.strokeColor,
pointColor : dataset.pointColor,
pointStrokeColor : dataset.pointStrokeColor,
});
helpers.each(dataset.data,function(dataPoint,index){
helpers.extend(this.datasets[datasetIndex].points[index], {
value : dataPoint,
label : this.data.labels[index],
datasetLabel: dataset.label,
strokeColor : dataset.pointStrokeColor,
fillColor : dataset.pointColor,
highlightFill : dataset.pointHighlightFill || dataset.pointColor,
highlightStroke : dataset.pointHighlightStroke || dataset.pointStrokeColor
});
},this);
},this);
this.eachPoints(function(point){ this.eachPoints(function(point){
point.save(); point.save();
}); });