mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-06 20:29:12 +02:00
139 lines
3.4 KiB
HTML
139 lines
3.4 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>Radial Gradient</title>
|
|
<script src="../../dist/chart.js"></script>
|
|
<script src="../utils.js"></script>
|
|
<style>
|
|
canvas {
|
|
-moz-user-select: none;
|
|
-webkit-user-select: none;
|
|
-ms-user-select: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div style="width: 75%;">
|
|
<canvas id="canvas"></canvas>
|
|
</div>
|
|
<br>
|
|
<br>
|
|
<button id="randomizeData">Randomize Data</button>
|
|
<script>
|
|
var cache = new Map();
|
|
var width = null;
|
|
var height = null;
|
|
|
|
function createRadialGradient3(context, c1, c2, c3) {
|
|
var chartArea = context.chart.chartArea;
|
|
if (!chartArea) {
|
|
// This case happens on initial chart load
|
|
return null;
|
|
}
|
|
|
|
var chartWidth = chartArea.right - chartArea.left;
|
|
var chartHeight = chartArea.bottom - chartArea.top;
|
|
if (width !== chartWidth || height !== chartHeight) {
|
|
cache.clear();
|
|
}
|
|
var gradient = cache.get(c1 + c2 + c3);
|
|
if (!gradient) {
|
|
// Create the gradient because this is either the first render
|
|
// or the size of the chart has changed
|
|
width = chartWidth;
|
|
height = chartHeight;
|
|
var centerX = (chartArea.left + chartArea.right) / 2;
|
|
var centerY = (chartArea.top + chartArea.bottom) / 2;
|
|
var r = Math.min(
|
|
(chartArea.right - chartArea.left) / 2,
|
|
(chartArea.bottom - chartArea.top) / 2
|
|
);
|
|
var ctx = context.chart.ctx;
|
|
gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, r);
|
|
gradient.addColorStop(0, c1);
|
|
gradient.addColorStop(0.5, c2);
|
|
gradient.addColorStop(1, c3);
|
|
cache.set(c1 + c2 + c3, gradient);
|
|
}
|
|
|
|
return gradient;
|
|
}
|
|
|
|
var chartColors = window.chartColors;
|
|
var colors = [chartColors.red, chartColors.orange, chartColors.yellow, chartColors.green, chartColors.blue];
|
|
var config = {
|
|
type: 'polarArea',
|
|
data: {
|
|
datasets: [{
|
|
data: [
|
|
randomScalingFactor(),
|
|
randomScalingFactor(),
|
|
randomScalingFactor(),
|
|
randomScalingFactor(),
|
|
randomScalingFactor(),
|
|
],
|
|
backgroundColor: function(context) {
|
|
var c = colors[context.dataIndex];
|
|
if (context.active) {
|
|
c = Chart.helpers.getHoverColor(c);
|
|
}
|
|
var mid = Chart.helpers.color(c).desaturate(0.2).darken(0.2).rgbString();
|
|
var start = Chart.helpers.color(c).lighten(0.2).rotate(270).rgbString();
|
|
var end = Chart.helpers.color(c).lighten(0.1).rgbString();
|
|
return createRadialGradient3(context, start, mid, end);
|
|
},
|
|
label: 'My dataset' // for legend
|
|
}],
|
|
labels: [
|
|
'Red',
|
|
'Orange',
|
|
'Yellow',
|
|
'Green',
|
|
'Blue'
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
plugins: {
|
|
legend: {
|
|
position: 'right',
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: 'Chart.js Polar Area Chart'
|
|
},
|
|
},
|
|
scales: {
|
|
r: {
|
|
ticks: {
|
|
beginAtZero: true
|
|
},
|
|
reverse: false
|
|
}
|
|
},
|
|
animation: {
|
|
animateRotate: false,
|
|
animateScale: true
|
|
}
|
|
}
|
|
};
|
|
|
|
window.onload = function() {
|
|
var ctx = document.getElementById('canvas');
|
|
window.myPolarArea = new Chart(ctx, config);
|
|
};
|
|
|
|
document.getElementById('randomizeData').addEventListener('click', function() {
|
|
config.data.datasets.forEach(function(piece, i) {
|
|
piece.data.forEach(function(value, j) {
|
|
config.data.datasets[i].data[j] = randomScalingFactor();
|
|
});
|
|
});
|
|
window.myPolarArea.update();
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|