2017-04-06 18 views
1

グラフをy軸固定の水平スクロールで表示したい。 はV.1のため、このhttp://jsfiddle.net/mbhavfwm/Chart.js V2。固定y軸を持つ棒グラフ

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); 
}}); 

のようなものを見つけましたが、コードは、私はドキュメントで、このためのパラメータやオプションが表示されないV.2

に異なるようです。何か案は?

答えて

3

次のコードでフィディルドに記載されている既存のコードを変更するだけで済みます。これは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); 
} 

}

グッドラック。

関連する問題