123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215 |
- 'use strict';
- module.exports = function(Chart) {
- var helpers = Chart.helpers;
- Chart.defaults.polarArea = {
- scale: {
- type: 'radialLinear',
- lineArc: true, // so that lines are circular
- ticks: {
- beginAtZero: true
- }
- },
- // Boolean - Whether to animate the rotation of the chart
- animation: {
- animateRotate: true,
- animateScale: true
- },
- startAngle: -0.5 * Math.PI,
- aspectRatio: 1,
- legendCallback: function(chart) {
- var text = [];
- text.push('<ul class="' + chart.id + '-legend">');
- var data = chart.data;
- var datasets = data.datasets;
- var labels = data.labels;
- if (datasets.length) {
- for (var i = 0; i < datasets[0].data.length; ++i) {
- text.push('<li><span style="background-color:' + datasets[0].backgroundColor[i] + '"></span>');
- if (labels[i]) {
- text.push(labels[i]);
- }
- text.push('</li>');
- }
- }
- text.push('</ul>');
- return text.join('');
- },
- legend: {
- labels: {
- generateLabels: function(chart) {
- var data = chart.data;
- if (data.labels.length && data.datasets.length) {
- return data.labels.map(function(label, i) {
- var meta = chart.getDatasetMeta(0);
- var ds = data.datasets[0];
- var arc = meta.data[i];
- var custom = arc.custom || {};
- var getValueAtIndexOrDefault = helpers.getValueAtIndexOrDefault;
- var arcOpts = chart.options.elements.arc;
- var fill = custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(ds.backgroundColor, i, arcOpts.backgroundColor);
- var stroke = custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(ds.borderColor, i, arcOpts.borderColor);
- var bw = custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(ds.borderWidth, i, arcOpts.borderWidth);
- return {
- text: label,
- fillStyle: fill,
- strokeStyle: stroke,
- lineWidth: bw,
- hidden: isNaN(ds.data[i]) || meta.data[i].hidden,
- // Extra data used for toggling the correct item
- index: i
- };
- });
- }
- return [];
- }
- },
- onClick: function(e, legendItem) {
- var index = legendItem.index;
- var chart = this.chart;
- var i, ilen, meta;
- for (i = 0, ilen = (chart.data.datasets || []).length; i < ilen; ++i) {
- meta = chart.getDatasetMeta(i);
- meta.data[index].hidden = !meta.data[index].hidden;
- }
- chart.update();
- }
- },
- // Need to override these to give a nice default
- tooltips: {
- callbacks: {
- title: function() {
- return '';
- },
- label: function(tooltipItem, data) {
- return data.labels[tooltipItem.index] + ': ' + tooltipItem.yLabel;
- }
- }
- }
- };
- Chart.controllers.polarArea = Chart.DatasetController.extend({
- dataElementType: Chart.elements.Arc,
- linkScales: helpers.noop,
- update: function(reset) {
- var me = this;
- var chart = me.chart;
- var chartArea = chart.chartArea;
- var meta = me.getMeta();
- var opts = chart.options;
- var arcOpts = opts.elements.arc;
- var minSize = Math.min(chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
- chart.outerRadius = Math.max((minSize - arcOpts.borderWidth / 2) / 2, 0);
- chart.innerRadius = Math.max(opts.cutoutPercentage ? (chart.outerRadius / 100) * (opts.cutoutPercentage) : 1, 0);
- chart.radiusLength = (chart.outerRadius - chart.innerRadius) / chart.getVisibleDatasetCount();
- me.outerRadius = chart.outerRadius - (chart.radiusLength * me.index);
- me.innerRadius = me.outerRadius - chart.radiusLength;
- meta.count = me.countVisibleElements();
- helpers.each(meta.data, function(arc, index) {
- me.updateElement(arc, index, reset);
- });
- },
- updateElement: function(arc, index, reset) {
- var me = this;
- var chart = me.chart;
- var dataset = me.getDataset();
- var opts = chart.options;
- var animationOpts = opts.animation;
- var scale = chart.scale;
- var getValueAtIndexOrDefault = helpers.getValueAtIndexOrDefault;
- var labels = chart.data.labels;
- var circumference = me.calculateCircumference(dataset.data[index]);
- var centerX = scale.xCenter;
- var centerY = scale.yCenter;
- // If there is NaN data before us, we need to calculate the starting angle correctly.
- // We could be way more efficient here, but its unlikely that the polar area chart will have a lot of data
- var visibleCount = 0;
- var meta = me.getMeta();
- for (var i = 0; i < index; ++i) {
- if (!isNaN(dataset.data[i]) && !meta.data[i].hidden) {
- ++visibleCount;
- }
- }
- // var negHalfPI = -0.5 * Math.PI;
- var datasetStartAngle = opts.startAngle;
- var distance = arc.hidden ? 0 : scale.getDistanceFromCenterForValue(dataset.data[index]);
- var startAngle = datasetStartAngle + (circumference * visibleCount);
- var endAngle = startAngle + (arc.hidden ? 0 : circumference);
- var resetRadius = animationOpts.animateScale ? 0 : scale.getDistanceFromCenterForValue(dataset.data[index]);
- helpers.extend(arc, {
- // Utility
- _datasetIndex: me.index,
- _index: index,
- _scale: scale,
- // Desired view properties
- _model: {
- x: centerX,
- y: centerY,
- innerRadius: 0,
- outerRadius: reset ? resetRadius : distance,
- startAngle: reset && animationOpts.animateRotate ? datasetStartAngle : startAngle,
- endAngle: reset && animationOpts.animateRotate ? datasetStartAngle : endAngle,
- label: getValueAtIndexOrDefault(labels, index, labels[index])
- }
- });
- // Apply border and fill style
- me.removeHoverStyle(arc);
- arc.pivot();
- },
- removeHoverStyle: function(arc) {
- Chart.DatasetController.prototype.removeHoverStyle.call(this, arc, this.chart.options.elements.arc);
- },
- countVisibleElements: function() {
- var dataset = this.getDataset();
- var meta = this.getMeta();
- var count = 0;
- helpers.each(meta.data, function(element, index) {
- if (!isNaN(dataset.data[index]) && !element.hidden) {
- count++;
- }
- });
- return count;
- },
- calculateCircumference: function(value) {
- var count = this.getMeta().count;
- if (count > 0 && !isNaN(value)) {
- return (2 * Math.PI) / count;
- }
- return 0;
- }
- });
- };
|