把纵轴刻度用两种颜色画出来。股票中有些图纵轴刻度标签会以昨收为中心，上下分为红绿两种颜色。Flotr有K线图，但轴不能设两种颜色，稍微改下就可以了。
改后的配置方法：
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'//上面颜色
//其它配置略
}
};添加了close,downcolor,upcolor配置。修改原来的drawLabels函数，添加十来行代码。通常不想改下载下来的Flotr源码，只要在画图前执行了下面代码就行了。下面代码是把drawLabels函数拿出来改了下，在画图前执行了会替换原函数。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(''));
}
}
});