mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-08 05:09:08 +02:00
5aa16a67c1
Fixed the generateLegend function to create the colour block next to the text instead of around it.
105 lines
3.3 KiB
JavaScript
Executable File
105 lines
3.3 KiB
JavaScript
Executable File
"use strict";
|
|
|
|
module.exports = function() {
|
|
|
|
//Occupy the global variable of Chart, and create a simple base class
|
|
var Chart = function(context, config) {
|
|
this.config = config;
|
|
|
|
// Support a jQuery'd canvas element
|
|
if (context.length && context[0].getContext) {
|
|
context = context[0];
|
|
}
|
|
|
|
// Support a canvas domnode
|
|
if (context.getContext) {
|
|
context = context.getContext("2d");
|
|
}
|
|
|
|
this.ctx = context;
|
|
this.canvas = context.canvas;
|
|
|
|
// Figure out what the size of the chart will be.
|
|
// If the canvas has a specified width and height, we use those else
|
|
// we look to see if the canvas node has a CSS width and height.
|
|
// If there is still no height, fill the parent container
|
|
this.width = context.canvas.width || parseInt(Chart.helpers.getStyle(context.canvas, 'width')) || Chart.helpers.getMaximumWidth(context.canvas);
|
|
this.height = context.canvas.height || parseInt(Chart.helpers.getStyle(context.canvas, 'height')) || Chart.helpers.getMaximumHeight(context.canvas);
|
|
|
|
this.aspectRatio = this.width / this.height;
|
|
|
|
if (isNaN(this.aspectRatio) || isFinite(this.aspectRatio) === false) {
|
|
// If the canvas has no size, try and figure out what the aspect ratio will be.
|
|
// Some charts prefer square canvases (pie, radar, etc). If that is specified, use that
|
|
// else use the canvas default ratio of 2
|
|
this.aspectRatio = config.aspectRatio !== undefined ? config.aspectRatio : 2;
|
|
}
|
|
|
|
// Store the original style of the element so we can set it back
|
|
this.originalCanvasStyleWidth = context.canvas.style.width;
|
|
this.originalCanvasStyleHeight = context.canvas.style.height;
|
|
|
|
// High pixel density displays - multiply the size of the canvas height/width by the device pixel ratio, then scale.
|
|
Chart.helpers.retinaScale(this);
|
|
|
|
if (config) {
|
|
this.controller = new Chart.Controller(this);
|
|
}
|
|
|
|
// Always bind this so that if the responsive state changes we still work
|
|
var _this = this;
|
|
Chart.helpers.addResizeListener(context.canvas.parentNode, function() {
|
|
if (_this.controller && _this.controller.config.options.responsive) {
|
|
_this.controller.resize();
|
|
}
|
|
});
|
|
|
|
return this.controller ? this.controller : this;
|
|
|
|
};
|
|
|
|
//Globally expose the defaults to allow for user updating/changing
|
|
Chart.defaults = {
|
|
global: {
|
|
responsive: true,
|
|
responsiveAnimationDuration: 0,
|
|
maintainAspectRatio: true,
|
|
events: ["mousemove", "mouseout", "click", "touchstart", "touchmove"],
|
|
hover: {
|
|
onHover: null,
|
|
mode: 'single',
|
|
animationDuration: 400
|
|
},
|
|
onClick: null,
|
|
defaultColor: 'rgba(0,0,0,0.1)',
|
|
defaultFontColor: '#666',
|
|
defaultFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
|
|
defaultFontSize: 12,
|
|
defaultFontStyle: 'normal',
|
|
showLines: true,
|
|
|
|
// Element defaults defined in element extensions
|
|
elements: {},
|
|
|
|
// Legend callback string
|
|
legendCallback: function(chart) {
|
|
var text = [];
|
|
text.push('<ul class="' + chart.id + '-legend">');
|
|
for (var i = 0; i < chart.data.datasets.length; i++) {
|
|
text.push('<li><span style="background-color:' + chart.data.datasets[i].backgroundColor + '"></span>');
|
|
if (chart.data.datasets[i].label) {
|
|
text.push(chart.data.datasets[i].label);
|
|
}
|
|
text.push('</li>');
|
|
}
|
|
text.push('</ul>');
|
|
|
|
return text.join("");
|
|
}
|
|
}
|
|
};
|
|
|
|
return Chart;
|
|
|
|
};
|