Mirrors/Chart.js
2
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2026-03-06 00:14:03 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #711 from cmweiss/master

Browse Source 
Default color for Doughnut/Pie
This commit is contained in:
Evert Timberg
2015-04-09 11:25:45 -04:00
parent 44ed661e3b bb6237a15e
commit 972bc5636d
3 changed files with 63 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/05-Pie-Doughnut-Chart.md
View File

@@ -55,7 +55,7 @@ var data = [
]
```
For a pie chart, you must pass in an array of objects with a value and a color property. The value attribute should be a number, Chart.js will total all of the numbers and calculate the relative proportion of each. The color attribute should be a string. Similar to CSS, for this string you can use HEX notation, RGB, RGBA or HSL.
For a pie chart, you must pass in an array of objects with a value and an optional color property. The value attribute should be a number, Chart.js will total all of the numbers and calculate the relative proportion of each. The color attribute should be a string. Similar to CSS, for this string you can use HEX notation, RGB, RGBA or HSL.
### Chart options

58
samples/doughnut.color.html Normal file
View File

@@ -0,0 +1,58 @@
<!doctype html>
<html>
<head>
<title>Doughnut Chart</title>
<script src="../src/Chart.Core.js"></script>
<script src="../src/Chart.Doughnut.js"></script>
<style>
body{
padding: 0;
margin: 0;
}
#canvas-holder{
width:30%;
}
</style>
</head>
<body>
<div id="canvas-holder">
<canvas id="chart-area" width="500" height="500"/>
</div>
<script>
var doughnutData = [
{
value: 1,
label: "One"
},
{
value: 2,
label: "Two"
},
{
value: 3,
label: "Three"
},
{
value: 4,
label: "Four"
},
{
value: 5,
label: "Five"
}
];
window.onload = function(){
var ctx = document.getElementById("chart-area").getContext("2d");
window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true});
};
</script>
</body>
</html>

6
src/Chart.Doughnut.js
View File

@@ -36,7 +36,6 @@
};
Chart.Type.extend({
//Passing in a name registers this chart in the Chart namespace
name: "Doughnut",
@@ -73,6 +72,9 @@
this.calculateTotal(data);
helpers.each(data,function(datapoint, index){
if (!datapoint.color) {
datapoint.color = 'hsl(' + (360 * index / data.length) + ', 100%, 50%)';
}
this.addData(datapoint, index, true);
},this);
@@ -181,4 +183,4 @@
defaults : helpers.merge(defaultConfig,{percentageInnerCutout : 0})
});
}).call(this);
}).call(this);