Mirrors/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2024-10-06 20:29:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

Convert bar chart to use nested config. Noticed that the segmentShowStroke option wasn't used at all.

Browse Source
This commit is contained in:
Evert Timberg 2015-05-26 19:30:34 -04:00
parent 54b51038ca
commit 7d8b1712a7
1 changed files with 29 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/Chart.Doughnut.js
View File

@ -7,30 +7,33 @@
helpers = Chart.helpers;
var defaultConfig = {
//Boolean - Whether we should show a stroke on each segment
segmentShowStroke: true,
segments: {
//Boolean - Whether we should show a stroke on each segment
showStroke: true,
//String - The colour of each segment stroke
segmentStrokeColor: "#fff",
//String - The colour of each segment stroke
strokeColor: "#fff",
//Number - The width of each segment stroke
borderWidth: 2,
//Number - The width of each segment stroke
borderWidth: 2,
},
hover: {
// The duration of animations triggered by hover events
animationDuration: 400,
},
animation: {
//Boolean - Whether we animate the rotation of the Doughnut
animateRotate: true,
//Boolean - Whether we animate scaling the Doughnut from the centre
animateScale: false,
},
//The percentage of the chart that we cut out of the middle.
cutoutPercentage: 50,
// The duration of animations triggered by hover events
hoverAnimationDuration: 400,
//String - Animation easing effect
animationEasing: "easeOutQuart",
//Boolean - Whether we animate the rotation of the Doughnut
animateRotate: true,
//Boolean - Whether we animate scaling the Doughnut from the centre
animateScale: false,
//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].backgroundColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
@ -69,9 +72,9 @@
}
helpers.extend(metaSlice, {
startAngle: Math.PI * 1.5,
circumference: (this.options.animateRotate) ? 0 : this.calculateCircumference(metaSlice.value),
outerRadius: (this.options.animateScale) ? 0 : this.outerRadius,
innerRadius: (this.options.animateScale) ? 0 : (this.outerRadius / 100) * this.options.percentageInnerCutout,
circumference: (this.options.animation.animateRotate) ? 0 : this.calculateCircumference(metaSlice.value),
outerRadius: (this.options.animation.animateScale) ? 0 : this.outerRadius,
innerRadius: (this.options.animation.animateScale) ? 0 : (this.outerRadius / 100) * this.options.percentageInnerCutout,
});
if (!metaSlice.backgroundColor) {
slice.backgroundColor = 'hsl(' + (360 * index / data.length) + ', 100%, 50%)';
@ -157,7 +160,7 @@
(this.lastActive.length && this.active.length && changed)) {
this.stop();
this.render(this.options.hoverAnimationDuration);
this.render(this.options.hover.animationDuration);
}
}
@ -191,7 +194,7 @@
this.total += Math.abs(slice.value);
}, this);
this.outerRadius = (helpers.min([this.chart.width, this.chart.height]) - this.options.borderWidth / 2) / 2;
this.outerRadius = (helpers.min([this.chart.width, this.chart.height]) - this.options.segments.borderWidth / 2) / 2;
// Map new data to data points
helpers.each(this.data.metaData, function(slice, index) {
@ -210,8 +213,8 @@
backgroundColor: datapoint.backgroundColor,
hoverBackgroundColor: datapoint.hoverBackgroundColor || datapoint.backgroundColor,
borderWidth: this.options.borderWidth,
borderColor: this.options.segmentStrokeColor,
borderWidth: this.options.segments.borderWidth,
borderColor: this.options.segments.strokeColor,
});
helpers.extend(slice, {