mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-06 04:09:08 +02:00
Data editable from chart config
This commit is contained in:
parent
02f858b264
commit
359e94151c
@ -48,6 +48,9 @@
|
||||
defaults : defaultConfig,
|
||||
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
|
||||
var options = this.options;
|
||||
|
||||
@ -140,6 +143,29 @@
|
||||
this.render();
|
||||
},
|
||||
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();
|
||||
// Reset any highlight colours before updating.
|
||||
helpers.each(this.activeElements, function(activeElement){
|
||||
|
@ -46,6 +46,9 @@
|
||||
//Config is automatically merged by the core of Chart.js, and is available at this.options
|
||||
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
|
||||
this.segments = [];
|
||||
this.outerRadius = (helpers.min([this.chart.width,this.chart.height]) - this.options.segmentStrokeWidth/2)/2;
|
||||
@ -118,6 +121,26 @@
|
||||
},this);
|
||||
},
|
||||
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);
|
||||
console.log(this.data, this.segments);
|
||||
} else{
|
||||
// Data size changed without properly inserting, just redraw the chart
|
||||
this.initialize(this.data);
|
||||
}
|
||||
|
||||
this.calculateTotal(this.segments);
|
||||
|
||||
// Reset any highlight colours before updating.
|
||||
|
@ -59,6 +59,9 @@
|
||||
name: "Line",
|
||||
defaults : defaultConfig,
|
||||
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
|
||||
this.PointClass = Chart.Point.extend({
|
||||
strokeWidth : this.options.pointDotStrokeWidth,
|
||||
@ -133,6 +136,31 @@
|
||||
this.render();
|
||||
},
|
||||
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();
|
||||
// Reset any highlight colours before updating.
|
||||
helpers.each(this.activeElements, function(activeElement){
|
||||
|
@ -59,6 +59,9 @@
|
||||
//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
|
||||
initialize: function(data){
|
||||
// Save data as a source for updating of values & methods
|
||||
this.data = data;
|
||||
|
||||
this.segments = [];
|
||||
//Declare segment class as a chart instance specific class, so it can share props for this instance
|
||||
this.SegmentArc = Chart.Arc.extend({
|
||||
@ -190,6 +193,23 @@
|
||||
|
||||
},
|
||||
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);
|
||||
console.log(this.data, this.segments);
|
||||
} else{
|
||||
// Data size changed without properly inserting, just redraw the chart
|
||||
this.initialize(this.data);
|
||||
}
|
||||
|
||||
this.calculateTotal(this.segments);
|
||||
|
||||
helpers.each(this.segments,function(segment){
|
||||
|
@ -67,6 +67,9 @@
|
||||
},
|
||||
|
||||
initialize: function(data){
|
||||
// Save data as a source for updating of values & methods
|
||||
this.data = data;
|
||||
|
||||
this.PointClass = Chart.Point.extend({
|
||||
strokeWidth : this.options.pointDotStrokeWidth,
|
||||
radius : this.options.pointDotRadius,
|
||||
@ -268,6 +271,31 @@
|
||||
this.update();
|
||||
},
|
||||
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){
|
||||
point.save();
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user