Flotr縦軸スケールカラー拡張
縦軸目盛りを2色で描く.株の中には縦軸の目盛りラベルが昨日の収入を中心に、上下に赤と緑の2色に分かれているものもあります.FlotrにはK線図がありますが、軸は2色にすることはできませんので、少し変更すればいいです.
変更後の構成方法:
変更後の構成方法:
var options = {
title: " ",
colors: ['#C0D800', '#00A8F0', '#CB4B4B', '#4DA74D', '#9440ED'],
xaxis: {ticks: json.ticks},
yaxis:{ ticks: [1,2,3, 4,5,6, 7],// ， ，
close:4, // ,
downcolor:'#00FF00',//
upcolor:'#FF0000'//
//
}
};Flotr.Graph.implement({
drawLabels: function(){
// Construct fixed width label boxes, which can be styled easily.
var noLabels = 0, axis,
xBoxWidth, i, html, tick, left, top,
options = this.options,
ctx = this.ctx,
a = this.axes;
for(i = 0; i < a.x.ticks.length; ++i){
if (a.x.ticks[i].label) {
++noLabels;
}
}
xBoxWidth = this.plotWidth / noLabels;
if (options.grid.circular) {
ctx.save();
ctx.translate(this.plotOffset.left+this.plotWidth/2, this.plotOffset.top+this.plotHeight/2);
var radius = this.plotHeight*options.radar.radiusRatio/2 + options.fontSize,
sides = this.axes.x.ticks.length,
coeff = 2*(Math.PI/sides),
angle = -Math.PI/2;
var style = {
size: options.fontSize
};
// Add x labels.
axis = a.x;
style.color = axis.options.color || options.grid.color;
for(i = 0; i < axis.ticks.length && axis.options.showLabels; ++i){
tick = axis.ticks[i];
tick.label += '';
if(!tick.label || tick.label.length == 0) continue;
var x = Math.cos(i*coeff+angle) * radius,
y = Math.sin(i*coeff+angle) * radius;
style.angle = Flotr.toRad(axis.options.labelsAngle);
style.valign = 'm';
style.halign = (Math.abs(x) < 0.1 ? 'c' : (x < 0 ? 'r' : 'l'));
ctx.drawText(tick.label, x, y, style);
}
// Add y labels.
axis = a.y;
style.color = axis.options.color || options.grid.color;
for(i = 0; i < axis.ticks.length && axis.options.showLabels; ++i){
tick = axis.ticks[i];
tick.label += '';
if(!tick.label || tick.label.length == 0) continue;
style.angle = Flotr.toRad(axis.options.labelsAngle);
style.valign = 'm';
style.halign = 'l';
ctx.drawText(tick.label, 3, -(axis.ticks[i].v / axis.max) * (radius - options.fontSize), style);
}
ctx.restore();
return;
}
if (!options.HtmlText && this.textEnabled) {
var style = {
size: options.fontSize,
adjustAlign: true
};
// Add x labels.
axis = a.x;
style.color = axis.options.color || options.grid.color;
for(i = 0; i < axis.ticks.length && axis.options.showLabels && axis.used; ++i){
tick = axis.ticks[i];
if(!tick.label || tick.label.length == 0) continue;
left = axis.d2p(tick.v);
if (left < 0 || left > this.plotWidth) continue;
style.angle = Flotr.toRad(axis.options.labelsAngle);
style.halign = 'c';
style.valign = 't';
ctx.drawText(
tick.label,
this.plotOffset.left + left,
this.plotOffset.top + this.plotHeight + options.grid.labelMargin,
style
);
}
// Add x2 labels.
axis = a.x2;
style.color = axis.options.color || options.grid.color;
for(i = 0; i < axis.ticks.length && axis.options.showLabels && axis.used; ++i){
tick = axis.ticks[i];
if(!tick.label || tick.label.length == 0) continue;
left = axis.d2p(tick.v);
if(left < 0 || left > this.plotWidth) continue;
style.angle = Flotr.toRad(axis.options.labelsAngle);
style.halign = 'c';
style.valign = 'b';
ctx.drawText(
tick.label,
this.plotOffset.left + left,
this.plotOffset.top + options.grid.labelMargin,
style
);
}
// Add y labels.
axis = a.y;
style.color = axis.options.color || options.grid.color;
for(i = 0; i < axis.ticks.length && axis.options.showLabels && axis.used; ++i){
tick = axis.ticks[i];
if (!tick.label || tick.label.length == 0) continue;
top = axis.d2p(tick.v);
if(top < 0 || top > this.plotHeight) continue;
style.angle = Flotr.toRad(axis.options.labelsAngle);
style.halign = 'r';
style.valign = 'm';
ctx.drawText(
tick.label,
this.plotOffset.left - options.grid.labelMargin,
this.plotOffset.top + top,
style
);
}
// Add y2 labels.
axis = a.y2;
style.color = axis.options.color || options.grid.color;
for(i = 0; i < axis.ticks.length && axis.options.showLabels && axis.used; ++i){
tick = axis.ticks[i];
if (!tick.label || tick.label.length == 0) continue;
top = axis.d2p(tick.v);
if(top < 0 || top > this.plotHeight) continue;
style.angle = Flotr.toRad(axis.options.labelsAngle);
style.halign = 'l';
style.valign = 'm';
ctx.drawText(
tick.label,
this.plotOffset.left + this.plotWidth + options.grid.labelMargin,
this.plotOffset.top + top,
style
);
ctx.save();
ctx.strokeStyle = style.color;
ctx.beginPath();
ctx.moveTo(this.plotOffset.left + this.plotWidth - 8, this.plotOffset.top + axis.d2p(tick.v));
ctx.lineTo(this.plotOffset.left + this.plotWidth, this.plotOffset.top + axis.d2p(tick.v));
ctx.stroke();
ctx.restore();
}
}
else if (a.x.options.showLabels || a.x2.options.showLabels || a.y.options.showLabels || a.y2.options.showLabels) {
html = ['<div style="font-size:smaller;color:' + options.grid.color + ';" class="flotr-labels">'];
// Add x labels.
axis = a.x;
if (axis.options.showLabels){
for(i = 0; i < axis.ticks.length; ++i){
tick = axis.ticks[i];
if(!tick.label || tick.label.length == 0 ||
(this.plotOffset.left + axis.d2p(tick.v) < 0) ||
(this.plotOffset.left + axis.d2p(tick.v) > this.canvasWidth)) continue;
html.push('<div style="position:absolute;top:' + (this.plotOffset.top + this.plotHeight + options.grid.labelMargin) + 'px;left:' + (this.plotOffset.left +axis.d2p(tick.v) - xBoxWidth/2) + 'px;width:' + xBoxWidth + 'px;text-align:center;'+(axis.options.color?('color:'+axis.options.color+';'):'')+'" class="flotr-grid-label">' + tick.label + '</div>');
}
}
// Add x2 labels.
axis = a.x2;
if (axis.options.showLabels && axis.used){
for(i = 0; i < axis.ticks.length; ++i){
tick = axis.ticks[i];
if(!tick.label || tick.label.length == 0 ||
(this.plotOffset.left + axis.d2p(tick.v) < 0) ||
(this.plotOffset.left + axis.d2p(tick.v) > this.canvasWidth)) continue;
html.push('<div style="position:absolute;top:' + (this.plotOffset.top - options.grid.labelMargin - axis.maxLabel.height) + 'px;left:' + (this.plotOffset.left + axis.d2p(tick.v) - xBoxWidth/2) + 'px;width:' + xBoxWidth + 'px;text-align:center;'+(axis.options.color?('color:'+axis.options.color+';'):'')+'" class="flotr-grid-label">' + tick.label + '</div>');
}
}
// Add y labels.
axis = a.y;
if (axis.options.showLabels){
var temp = axis.options.color;
for(i = 0; i < axis.ticks.length; ++i){
tick = axis.ticks[i];
//
if(axis.options.close > tick.v) {
axis.options.color = axis.options.downcolor;
}else if(axis.options.close < tick.v){
axis.options.color = axis.options.upcolor ;
}else{
axis.options.color = temp;
}
if (!tick.label || tick.label.length == 0 ||
(this.plotOffset.top + axis.d2p(tick.v) < 0) ||
(this.plotOffset.top + axis.d2p(tick.v) > this.canvasHeight)) continue;
html.push('<div style="position:absolute;top:' + (this.plotOffset.top + axis.d2p(tick.v) - axis.maxLabel.height/2) + 'px;left:0;width:' + (this.plotOffset.left - options.grid.labelMargin) + 'px;text-align:right;'+(axis.options.color?('color:'+axis.options.color+';'):'')+'" class="flotr-grid-label">' + tick.label + '</div>');
}
axis.options.color = temp;
}
// Add y2 labels.
axis = a.y2;
if (axis.options.showLabels && axis.used){
ctx.save();
ctx.strokeStyle = axis.options.color || options.grid.color;
ctx.beginPath();
for(i = 0; i < axis.ticks.length; ++i){
tick = axis.ticks[i];
if(axis.options.close > tick.v) {
axis.options.color = axis.options.downcolor;
}else if(axis.options.close < tick.v){
axis.options.color = axis.options.upcolor ;
}else{
axis.options.color = ctx.strokeStyle;
}
if (!tick.label || tick.label.length == 0 ||
(this.plotOffset.top + axis.d2p(tick.v) < 0) ||
(this.plotOffset.top + axis.d2p(tick.v) > this.canvasHeight)) continue;
html.push('<div style="position:absolute;top:' + (this.plotOffset.top + axis.d2p(tick.v) - axis.maxLabel.height/2) + 'px;right:0;width:' + (this.plotOffset.right - options.grid.labelMargin) + 'px;text-align:left;'+(axis.options.color?('color:'+axis.options.color+';'):'')+'" class="flotr-grid-label">' + tick.label + '</div>');
ctx.moveTo(this.plotOffset.left + this.plotWidth - 8, this.plotOffset.top + axis.d2p(tick.v));
ctx.lineTo(this.plotOffset.left + this.plotWidth, this.plotOffset.top + axis.d2p(tick.v));
}
ctx.stroke();
ctx.restore();
}
html.push('</div>');
this.el.appendHTML(html.join(''));
}
}
});