archive-gh-me/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2025-12-08 20:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Polar Area

Browse Source
This commit is contained in:
Tanner Linsley 2015-06-03 14:45:40 -06:00
parent ecb1cde3fc
commit b3b5896329
2 changed files with 159 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
samples/polar-area.html
View File

@ -22,27 +22,29 @@
var config = { var config = {
data: { data: {
data: [{ datasets: [{
value: randomScalingFactor(), data: [
backgroundColor: "#F7464A", randomScalingFactor(),
label: "Red" randomScalingFactor(),
}, { randomScalingFactor(),
value: randomScalingFactor(), randomScalingFactor(),
backgroundColor: "#46BFBD", randomScalingFactor(),
label: "Green" ],
}, { backgroundColor: [
value: randomScalingFactor(), "#F7464A",
backgroundColor: "#FDB45C", "#46BFBD",
label: "Yellow" "#FDB45C",
}, { "#949FB1",
value: randomScalingFactor(), "#4D5360",
backgroundColor: "#949FB1", ],
label: "Grey" labels: [
}, { "Red",
value: randomScalingFactor(), "Green",
backgroundColor: "#4D5360", "Yellow",
label: "Dark Grey" "Grey",
}] "Dark Grey"
]
}],
}, },
options: { options: {
responsive: true responsive: true
@ -55,9 +57,11 @@
}; };
$('#randomizeData').click(function() { $('#randomizeData').click(function() {
$.each(polarData, function(i, piece) { $.each(config.data.datasets, function(i, piece) {
polarData[i].value = randomScalingFactor(); $.each(piece.data, function(j, value) {
polarData[i].color = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)'; config.data.datasets[i].data[j] = randomScalingFactor();
//config.data.datasets.backgroundColor[i] = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
});
}); });
window.myPolarArea.update(); window.myPolarArea.update();
}); });

197
src/Chart.PolarArea.js
View File

@ -8,14 +8,6 @@
var defaultConfig = { var defaultConfig = {
segment: {
//String - The colour of the border on each segment.
borderColor: "#fff",
//Number - The width of the border value in pixels
borderWidth: 2,
},
scale: { scale: {
scaleType: "radialLinear", scaleType: "radialLinear",
display: true, display: true,
@ -60,9 +52,6 @@
//Boolean - Whether to animate the rotation of the chart //Boolean - Whether to animate the rotation of the chart
animateRotate: true, animateRotate: true,
//String - A legend template
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
}; };
@ -91,56 +80,40 @@
this.min = null; this.min = null;
this.max = null; this.max = null;
helpers.each(self.data.data, function(data) { helpers.each(self.data.datasets[0].data, function(value) {
if (this.min === null) { if (this.min === null) {
this.min = data.value; this.min = value;
} else if (data.value < this.min) { } else if (value < this.min) {
this.min = data.value; this.min = value;
} }
if (this.max === null) { if (this.max === null) {
this.max = data.value; this.max = value;
} else if (data.value > this.max) { } else if (value > this.max) {
this.max = data.value; this.max = value;
} }
}, this); }, this);
} }
}); });
//Declare segment class as a chart instance specific class, so it can share props for this instance helpers.bindEvents(this, this.options.events, this.events);
this.Slice = Chart.Arc.extend();
//Set up tooltip events on the chart //Set up tooltip events on the chart
if (this.options.showTooltips) { helpers.bindEvents(this, this.options.events, this.events);
helpers.bindEvents(this, this.options.events, this.onHover);
}
// Create new slice for each piece of data //Create a new bar for each piece of data
this.data.metaData = []; helpers.each(this.data.datasets, function(dataset, datasetIndex) {
helpers.each(this.data.data, function(slice, index) { dataset.metaData = [];
var metaSlice = new this.Slice({ helpers.each(dataset.data, function(dataPoint, index) {
_chart: this.chart, dataset.metaData.push(new Chart.Arc({
innerRadius: 0, _chart: this.chart,
startAngle: Math.PI * 1.5, _datasetIndex: datasetIndex,
endAngle: Math.PI * 1.5, _index: index,
x: this.chart.width / 2, _model: {}
y: this.chart.height / 2 }));
}); }, this);
if (typeof slice == 'number') {
helpers.extend(metaSlice, {
value: slice
});
} else {
helpers.extend(metaSlice, slice);
}
if (!metaSlice.backgroundColor) {
slice.backgroundColor = 'hsl(' + (360 * index / this.data.data.length) + ', 100%, 50%)';
}
metaSlice.save();
this.data.metaData.push(metaSlice);
}, this); }, this);
// Create tooltip instance exclusively for this chart with some defaults. // Create tooltip instance exclusively for this chart with some defaults.
this.tooltip = new Chart.Tooltip({ this.tooltip = new Chart.Tooltip({
_chart: this.chart, _chart: this.chart,
@ -148,6 +121,7 @@
_options: this.options, _options: this.options,
}, this); }, this);
// Update the chart with the latest data.
this.update(); this.update();
}, },
@ -165,36 +139,40 @@
this.scale.generateTicks(); this.scale.generateTicks();
this.scale.buildYLabels(); this.scale.buildYLabels();
this.outerRadius = (helpers.min([this.chart.width, this.chart.height]) - this.options.segment.borderWidth / 2) / 2; Chart.scaleService.fitScalesForChart(this, this.chart.width, this.chart.height);
var circumference = 1 / this.data.data.length * 2; var circumference = 1 / this.data.datasets[0].data.length * 2;
// Map new data to data points // Map new data to data points
helpers.each(this.data.metaData, function(slice, index) { helpers.each(this.data.datasets[0].metaData, function(slice, index) {
var datapoint = this.data.data[index]; var value = this.data.datasets[0].data[index];
var startAngle = Math.PI * 1.5 + (Math.PI * circumference) * index; var startAngle = Math.PI * 1.5 + (Math.PI * circumference) * index;
var endAngle = startAngle + (circumference * Math.PI); var endAngle = startAngle + (circumference * Math.PI);
helpers.extend(slice, { helpers.extend(slice, {
_index: index, _index: index,
x: this.chart.width / 2, _model: {
y: this.chart.height / 2, x: this.chart.width / 2,
value: datapoint.value, y: this.chart.height / 2,
label: datapoint.label, innerRadius: 0,
innerRadius: 0, outerRadius: this.scale.calculateCenterOffset(value),
outerRadius: this.scale.calculateCenterOffset(slice.value), startAngle: startAngle,
startAngle: startAngle, endAngle: endAngle,
endAngle: endAngle,
backgroundColor: datapoint.backgroundColor, backgroundColor: slice.custom && slice.custom.backgroundColor ? slice.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.data.datasets[0].backgroundColor, index, this.options.elements.slice.backgroundColor),
hoverBackgroundColor: datapoint.hoverBackgroundColor || datapoint.backgroundColor, hoverBackgroundColor: slice.custom && slice.custom.hoverBackgroundColor ? slice.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(this.data.datasets[0].hoverBackgroundColor, index, this.options.elements.slice.hoverBackgroundColor),
borderWidth: this.options.borderWidth, borderWidth: slice.custom && slice.custom.borderWidth ? slice.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.data.datasets[0].borderWidth, index, this.options.elements.slice.borderWidth),
borderColor: this.options.segmentStrokeColor, borderColor: slice.custom && slice.custom.borderColor ? slice.custom.borderColor : helpers.getValueAtIndexOrDefault(this.data.datasets[0].borderColor, index, this.options.elements.slice.borderColor),
label: helpers.getValueAtIndexOrDefault(this.data.datasets[0].labels, index, this.data.datasets[0].labels[index])
},
}); });
slice.pivot(); slice.pivot();
console.log(slice);
}, this); }, this);
this.render(); this.render();
@ -204,12 +182,99 @@
this.clear(); this.clear();
helpers.each(this.data.metaData, function(segment, index) { helpers.each(this.data.datasets[0].metaData, function(slice, index) {
segment.transition(easingDecimal).draw(); slice.transition(easingDecimal).draw();
}, this); }, this);
this.scale.draw(); this.scale.draw();
} },
events: function(e) {
// If exiting chart
if (e.type == 'mouseout') {
return this;
}
this.lastActive = this.lastActive || [];
// Find Active Elements
this.active = this.getSliceAtEvent(e);
// On Hover hook
if (this.options.onHover) {
this.options.onHover.call(this, this.active);
}
// Remove styling for last active (even if it may still be active)
if (this.lastActive.length) {
this.lastActive[0].backgroundColor = this.data.data[this.lastActive[0]._index].backgroundColor;
}
// Built in hover styling
if (this.active.length && this.options.hover.mode) {
this.active[0].backgroundColor = this.data.data[this.active[0]._index].hoverBackgroundColor || helpers.color(this.data.data[this.active[0]._index].backgroundColor).saturate(0.5).darken(0.35).rgbString();
}
// Built in Tooltips
if (this.options.tooltips.enabled) {
// The usual updates
this.tooltip.initialize();
// Active
if (this.active.length) {
helpers.extend(this.tooltip, {
opacity: 1,
_active: this.active,
});
this.tooltip.update();
} else {
// Inactive
helpers.extend(this.tooltip, {
opacity: 0,
});
}
}
// Hover animations
this.tooltip.pivot();
if (!this.animating) {
var changed;
helpers.each(this.active, function(element, index) {
if (element !== this.lastActive[index]) {
changed = true;
}
}, this);
// If entering, leaving, or changing elements, animate the change via pivot
if ((!this.lastActive.length && this.active.length) ||
(this.lastActive.length && !this.active.length) ||
(this.lastActive.length && this.active.length && changed)) {
this.stop();
this.render(this.options.hover.animationDuration);
}
}
// Remember Last Active
this.lastActive = this.active;
return this;
},
getSliceAtEvent: function(e) {
var elements = [];
var location = helpers.getRelativePosition(e);
helpers.each(this.data.metaData, function(slice, index) {
if (slice.inRange(location.x, location.y)) elements.push(slice);
}, this);
return elements;
},
}); });
}).call(this); }).call(this);