Now,I would like to implement a polar area chart like following picture with Chart.js and Canvas.
How should I do to implement it?
So far,I tried the following code but it does not work.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<style media="screen" type="text/css">#container{width:100%;height:100%;top:0;left:0;right:0;bottom:0;position:absolute;}</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
const canvas = document.getElementById('chart')
const ctx = canvas.getContext('2d');
const gradient = ctx.createRadialGradient(75, 50, 5, 90, 60, 100)
const [ w , h ] = [ canvas.clientWidth , canvas.clientHeight ];
gradient.addColorStop(0.0 , 'rgb(255,0,0)');
gradient.addColorStop(0.5 , 'rgb(0,255,0)');
const data = {
backgroundColor: [gradient,gradient,gradient,gradient,gradient],
labels: ['First label', 'Second label', 'Third label', 'Fourth label', 'Fifth label'],
datasets: [
{
label: 'First dataset',
backgroundColor: gradient,
data: [50, 20, 40, 50, 22]
}
]
};
const options = {
tooltips: {
mode: 'label'
},
};
const myRadarChart = new Chart(ctx, {
type: 'polarArea',
data,
options
});
});
</script>
</head>
<body>
<canvas id="chart" width="${width}" height="${width}" />
</body>
</html>
question from:
https://stackoverflow.com/questions/65933038/how-can-i-implement-polar-area-charts-with-chart-js-and-canvas 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
