TA貢獻1875條經驗 獲得超3個贊
這個問題解決有一段時間了，差點忘記還沒有提供答案...
這個是通過簡單修改chart.js源碼實現的。
先看改動的核心代碼:
Chart.Scale = Chart.Element.extend({
draw : function(easingDecimal,scaleType,boundaryXper){
var me = this,
ctx = this.ctx,
yLabelGap = (this.endPoint - this.startPoint) / this.steps,
xStart = Math.round(this.xScalePaddingLeft); // wmq
var xEnd = Math.round(this.xScalePaddingRight),
yGap = this.endPoint - this.startPoint,
xGap = this.width - xStart - xEnd; if (this.display){ //wmq
if(scaleType == 'preProfit'){
ctx.fillStyle = 'rgba(0,255,0,0.2)';
ctx.fillRect(xStart,this.startPoint,xGap*boundaryXper,yGap);
ctx.fillStyle = 'rgba(255,0,0,0.2)';
ctx.fillRect(xGap*boundaryXper+xStart,this.startPoint,xGap*(1-boundaryXper),yGap);
}......
scaleType,boundaryXper是新增的參數,在調用畫圖方法的options對象里面新增并傳進來,一個是畫布類型scaleType,此處是因為項目中多處使用了chart.js畫圖,故需要一個參數做區分,boundaryXper是當坐標值為0時,對應的畫圖寬度百分比(此寬度百分比就是需要畫的綠底色矩形的寬度占可畫面積橫向寬度的百分比,該值的取得與接口數據和正態分布數學算法有關,不做詳述),至于其他參數的含義,看過chart.js的源碼后自然明白是什么意思。
舉報