Flotr纵轴刻度分颜色扩展
把纵轴刻度用两种颜色画出来。股票中有些图纵轴刻度标签会以昨收为中心，上下分为红绿两种颜色。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-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(''));}}});