Chart.js V2。具有固定y軸的條形圖

Question

我希望我的圖表具有固定y軸的水平滾動。 找到像這樣http://jsfiddle.net/mbhavfwm/

new Chart(ctx).Line(data, { 
onAnimationComplete: function() { 
    var sourceCanvas = this.chart.ctx.canvas; 
    var copyWidth = this.scale.xScalePaddingLeft - 5; 
    // the +5 is so that the bottommost y axis label is not clipped off 
    // we could factor this in using measureText if we wanted to be generic 
    var copyHeight = this.scale.endPoint + 5; 
    var targetCtx = document.getElementById("myChartAxis").getContext("2d"); 
    targetCtx.canvas.width = copyWidth; 
    targetCtx.drawImage(sourceCanvas, 0, 0, copyWidth, copyHeight, 0, 0, copyWidth, copyHeight); 
}}); 

爲1節，但代碼似乎是第2版

不同我沒有看到這樣的參數或選項的文檔。有任何想法嗎？

Answer 1

你只需要用下面的代碼修改小提琴中提到的現有代碼。這可能會幫助您使用v2。

animation: { 
onComplete: function(data) { 
    var getParentIdName = this.chart.canvas.attributes.id.value, 
     targetElement = document.getElementById("virtual-chart-axis"), 
     sourceElement = document.getElementById("organizational-view"), 
     sourceCanvas = this.chart.ctx.canvas, 
     copyWidth = this.scales["y-axis-0"].width, // we are copying the width of actual chart 
     copyHeight = this.chart.height, // we are copying the width of actual chart 
     targetElementWidth = sourceElement.getContext("2d").canvas.clientWidth, 
     targetElementHeight = sourceElement.getContext("2d").canvas.clientHeight, 
     targetCtx = targetElement.getContext("2d"); 

    targetCtx.canvas.width = copyWidth; 
    targetCtx.canvas.height = copyHeight; 
    targetCtx.drawImage(sourceCanvas, 0, 0, targetElementWidth, targetElementHeight); 
} 

}

好運。