]> git.ipfire.org Git - thirdparty/Chart.js.git/commitdiff
Generate label strings using an option function. This allows new chart types to override
authorEvert Timberg <evert.timberg@gmail.com>
Sun, 6 Dec 2015 17:53:45 +0000 (12:53 -0500)
committerEvert Timberg <evert.timberg@gmail.com>
Sun, 6 Dec 2015 17:53:45 +0000 (12:53 -0500)
samples/doughnut.html
src/charts/Chart.Doughnut.js
src/charts/Chart.PolarArea.js
src/controllers/controller.doughnut.js
src/controllers/controller.polarArea.js
src/core/core.legend.js

index f0ebd5129f59f44ac27030f54acd53406e2c00dd..42647557ca7481a22046222e8880debfd115f477 100644 (file)
@@ -44,6 +44,7 @@
     };
 
     var config = {
+        type: 'doughnut',
         data: {
             datasets: [{
                 data: [
 
     window.onload = function() {
         var ctx = document.getElementById("chart-area").getContext("2d");
-        window.myDoughnut = Chart.Doughnut(ctx, config);
+        window.myDoughnut = new Chart(ctx, config);
         console.log(window.myDoughnut);
 
         updateLegend();
index 74c917323f2ac41fe55fe443d8374c701ea85338..ae8ff7760cff84eb17f7c4eb42d2c9d9c2bb4ad0 100644 (file)
@@ -5,29 +5,7 @@
        var Chart = root.Chart;
        var helpers = Chart.helpers;
 
-       var defaultConfig = {
-               aspectRatio: 1,
-               legendCallback: function(chart) {
-                       var text = [];
-                       text.push('<ul class="' + chart.id + '-legend">');
-
-                       if (chart.data.datasets.length) {
-                               for (var i = 0; i < chart.data.datasets[0].data.length; ++i) {
-                                       text.push('<li><span style="background-color:' + chart.data.datasets[0].backgroundColor[i] + '">');
-                                       if (chart.data.labels[i]) {
-                                               text.push(chart.data.labels[i]);
-                                       }
-                                       text.push('</span></li>');
-                               }
-                       }
-
-                       text.push('</ul>');
-                       return text.join("");
-               }
-       };
-
        Chart.Doughnut = function(context, config) {
-               config.options = helpers.configMerge(defaultConfig, config.options);
                config.type = 'doughnut';
 
                return new Chart(context, config);
index 2b44bb9aa859249806f49146d5d9560db7ad92d3..0ddf70433d9c92a3aa9559c46df84298e79be377 100644 (file)
@@ -5,29 +5,7 @@
        var Chart = root.Chart;
        var helpers = Chart.helpers;
 
-       var defaultConfig = {
-               aspectRatio: 1,
-               legendCallback: function(chart) {
-                       var text = [];
-                       text.push('<ul class="' + chart.id + '-legend">');
-
-                       if (chart.data.datasets.length) {
-                               for (var i = 0; i < chart.data.datasets[0].data.length; ++i) {
-                                       text.push('<li><span style="background-color:' + chart.data.datasets[0].backgroundColor[i] + '">');
-                                       if (chart.data.labels[i]) {
-                                               text.push(chart.data.labels[i]);
-                                       }
-                                       text.push('</span></li>');
-                               }
-                       }
-
-                       text.push('</ul>');
-                       return text.join("");
-               }
-       };
-
        Chart.PolarArea = function(context, config) {
-               config.options = helpers.configMerge(defaultConfig, config.options);
                config.type = 'polarArea';
 
                return new Chart(context, config);
index 0efb57fbb970a21bb3248fc085c2568b13f144e6..250279a56614a48029d455538faf0df51e6c8a83 100644 (file)
                        //Boolean - Whether we animate scaling the Doughnut from the centre
                        animateScale: false,
                },
+               aspectRatio: 1,
                hover: {
                        mode: 'single'
                },
+               legendCallback: function(chart) {
+                       var text = [];
+                       text.push('<ul class="' + chart.id + '-legend">');
+
+                       if (chart.data.datasets.length) {
+                               for (var i = 0; i < chart.data.datasets[0].data.length; ++i) {
+                                       text.push('<li><span style="background-color:' + chart.data.datasets[0].backgroundColor[i] + '">');
+                                       if (chart.data.labels[i]) {
+                                               text.push(chart.data.labels[i]);
+                                       }
+                                       text.push('</span></li>');
+                               }
+                       }
+
+                       text.push('</ul>');
+                       return text.join("");
+               },
+               legend: {
+                       labels: {
+                               generateLabels: function(data) {
+                                       return data.labels.slice();
+                               }
+                       }
+               },
+
                //The percentage of the chart that we cut out of the middle.
                cutoutPercentage: 50,
 
index b8fae6f8769b60209de49e1a4f78301e8a96839b..06847a31bc3952112124fcbc40d9d2f405d7aaa4 100644 (file)
                animateRotate: true,
                animateScale: true,
 
+               aspectRatio: 1,
+               legendCallback: function(chart) {
+                       var text = [];
+                       text.push('<ul class="' + chart.id + '-legend">');
+
+                       if (chart.data.datasets.length) {
+                               for (var i = 0; i < chart.data.datasets[0].data.length; ++i) {
+                                       text.push('<li><span style="background-color:' + chart.data.datasets[0].backgroundColor[i] + '">');
+                                       if (chart.data.labels[i]) {
+                                               text.push(chart.data.labels[i]);
+                                       }
+                                       text.push('</span></li>');
+                               }
+                       }
+
+                       text.push('</ul>');
+                       return text.join("");
+               },
+               legend: {
+                       labels: {
+                               generateLabels: function(data) {
+                                       return data.labels.slice();
+                               }
+                       }
+               },
+
                // Need to override these to give a nice default
                tooltips: {
                        callbacks: {
index 5a5274622d4077edff8b6814f46197091519cc7d..1ce7647426604ad790d9021bbedf15eeacb39509 100644 (file)
                        callback: function(dataset) {
                                return '' + dataset.label;
                        },
+
+                       // Generates labels shown in the legend
+                       generateLabels: function(data) {
+                               return data.datasets.map(function(dataset) {
+                                       return this.options.labels.callback.call(this, dataset);
+                               }, this);
+                       }
                },
        };
 
 
                initialize: function(config) {
                        helpers.extend(this, config);
-                       this.options = helpers.configMerge(Chart.defaults.global.legend, config.options);
 
                        // Contains hit boxes for each dataset (in dataset order)
                        this.legendHitBoxes = [];
+
+                       // Are we in doughnut mode which has a different data type
+                       this.doughnutMode = false;
                },
 
                // These methods are ordered by lifecyle. Utilities then follow.
 
                beforeBuildLabels: helpers.noop,
                buildLabels: function() {
-                       this.labels = this.chart.data.datasets.map(function(dataset) {
-                               return this.options.labels.callback.call(this, dataset);
-                       }, this);
+                       this.labels = this.options.labels.generateLabels.call(this, this.chart.data);
                },
                afterBuildLabels: helpers.noop,
 
                                        ctx.font = labelFont;
 
                                        helpers.each(this.labels, function(label, i) {
-
                                                var dataset = this.chart.data.datasets[i];
                                                var backgroundColor = dataset.backgroundColor;
                                                var borderColor = dataset.borderColor;