178 lines
5.5 KiB
JavaScript
178 lines
5.5 KiB
JavaScript
(function () {
|
|
|
|
var D = Flotr.DOM;
|
|
|
|
Flotr.addPlugin('titles', {
|
|
callbacks: {
|
|
'flotr:afterdraw': function() {
|
|
this.titles.drawTitles();
|
|
}
|
|
},
|
|
/**
|
|
* Draws the title and the subtitle
|
|
*/
|
|
drawTitles : function () {
|
|
var html,
|
|
options = this.options,
|
|
margin = options.grid.labelMargin,
|
|
ctx = this.ctx,
|
|
a = this.axes;
|
|
|
|
if (!options.HtmlText && this.textEnabled) {
|
|
var style = {
|
|
size: options.fontSize,
|
|
color: options.grid.color,
|
|
textAlign: 'center'
|
|
};
|
|
|
|
// Add subtitle
|
|
if (options.subtitle){
|
|
Flotr.drawText(
|
|
ctx, options.subtitle,
|
|
this.plotOffset.left + this.plotWidth/2,
|
|
this.titleHeight + this.subtitleHeight - 2,
|
|
style
|
|
);
|
|
}
|
|
|
|
style.weight = 1.5;
|
|
style.size *= 1.5;
|
|
|
|
// Add title
|
|
if (options.title){
|
|
Flotr.drawText(
|
|
ctx, options.title,
|
|
this.plotOffset.left + this.plotWidth/2,
|
|
this.titleHeight - 2,
|
|
style
|
|
);
|
|
}
|
|
|
|
style.weight = 1.8;
|
|
style.size *= 0.8;
|
|
|
|
// Add x axis title
|
|
if (a.x.options.title && a.x.used){
|
|
style.textAlign = a.x.options.titleAlign || 'center';
|
|
style.textBaseline = 'top';
|
|
style.angle = Flotr.toRad(a.x.options.titleAngle);
|
|
style = Flotr.getBestTextAlign(style.angle, style);
|
|
Flotr.drawText(
|
|
ctx, a.x.options.title,
|
|
this.plotOffset.left + this.plotWidth/2,
|
|
this.plotOffset.top + a.x.maxLabel.height + this.plotHeight + 2 * margin,
|
|
style
|
|
);
|
|
}
|
|
|
|
// Add x2 axis title
|
|
if (a.x2.options.title && a.x2.used){
|
|
style.textAlign = a.x2.options.titleAlign || 'center';
|
|
style.textBaseline = 'bottom';
|
|
style.angle = Flotr.toRad(a.x2.options.titleAngle);
|
|
style = Flotr.getBestTextAlign(style.angle, style);
|
|
Flotr.drawText(
|
|
ctx, a.x2.options.title,
|
|
this.plotOffset.left + this.plotWidth/2,
|
|
this.plotOffset.top - a.x2.maxLabel.height - 2 * margin,
|
|
style
|
|
);
|
|
}
|
|
|
|
// Add y axis title
|
|
if (a.y.options.title && a.y.used){
|
|
style.textAlign = a.y.options.titleAlign || 'right';
|
|
style.textBaseline = 'middle';
|
|
style.angle = Flotr.toRad(a.y.options.titleAngle);
|
|
style = Flotr.getBestTextAlign(style.angle, style);
|
|
Flotr.drawText(
|
|
ctx, a.y.options.title,
|
|
this.plotOffset.left - a.y.maxLabel.width - 2 * margin,
|
|
this.plotOffset.top + this.plotHeight / 2,
|
|
style
|
|
);
|
|
}
|
|
|
|
// Add y2 axis title
|
|
if (a.y2.options.title && a.y2.used){
|
|
style.textAlign = a.y2.options.titleAlign || 'left';
|
|
style.textBaseline = 'middle';
|
|
style.angle = Flotr.toRad(a.y2.options.titleAngle);
|
|
style = Flotr.getBestTextAlign(style.angle, style);
|
|
Flotr.drawText(
|
|
ctx, a.y2.options.title,
|
|
this.plotOffset.left + this.plotWidth + a.y2.maxLabel.width + 2 * margin,
|
|
this.plotOffset.top + this.plotHeight / 2,
|
|
style
|
|
);
|
|
}
|
|
}
|
|
else {
|
|
html = [];
|
|
|
|
// Add title
|
|
if (options.title)
|
|
html.push(
|
|
'<div style="position:absolute;top:0;left:',
|
|
this.plotOffset.left, 'px;font-size:1em;font-weight:bold;text-align:center;width:',
|
|
this.plotWidth,'px;" class="flotr-title">', options.title, '</div>'
|
|
);
|
|
|
|
// Add subtitle
|
|
if (options.subtitle)
|
|
html.push(
|
|
'<div style="position:absolute;top:', this.titleHeight, 'px;left:',
|
|
this.plotOffset.left, 'px;font-size:smaller;text-align:center;width:',
|
|
this.plotWidth, 'px;" class="flotr-subtitle">', options.subtitle, '</div>'
|
|
);
|
|
|
|
html.push('</div>');
|
|
|
|
html.push('<div class="flotr-axis-title" style="font-weight:bold;">');
|
|
|
|
// Add x axis title
|
|
if (a.x.options.title && a.x.used)
|
|
html.push(
|
|
'<div style="position:absolute;top:',
|
|
(this.plotOffset.top + this.plotHeight + options.grid.labelMargin + a.x.titleSize.height),
|
|
'px;left:', this.plotOffset.left, 'px;width:', this.plotWidth,
|
|
'px;text-align:center;" class="flotr-axis-title">', a.x.options.title, '</div>'
|
|
);
|
|
|
|
// Add x2 axis title
|
|
if (a.x2.options.title && a.x2.used)
|
|
html.push(
|
|
'<div style="position:absolute;top:0;left:', this.plotOffset.left, 'px;width:',
|
|
this.plotWidth, 'px;text-align:center;" class="flotr-axis-title">', a.x2.options.title, '</div>'
|
|
);
|
|
|
|
// Add y axis title
|
|
if (a.y.options.title && a.y.used)
|
|
html.push(
|
|
'<div style="position:absolute;top:',
|
|
(this.plotOffset.top + this.plotHeight/2 - a.y.titleSize.height/2),
|
|
'px;left:0;text-align:right;" class="flotr-axis-title">', a.y.options.title, '</div>'
|
|
);
|
|
|
|
// Add y2 axis title
|
|
if (a.y2.options.title && a.y2.used)
|
|
html.push(
|
|
'<div style="position:absolute;top:',
|
|
(this.plotOffset.top + this.plotHeight/2 - a.y.titleSize.height/2),
|
|
'px;right:0;text-align:right;" class="flotr-axis-title">', a.y2.options.title, '</div>'
|
|
);
|
|
|
|
html = html.join('');
|
|
|
|
var div = D.create('div');
|
|
D.setStyles({
|
|
color: options.grid.color
|
|
});
|
|
div.className = 'flotr-titles';
|
|
D.insert(this.el, div);
|
|
D.insert(div, html);
|
|
}
|
|
}
|
|
});
|
|
})();
|