Chart.js V2。具有固定 y 轴的条形图答案

【问题标题】：Chart.js V2. bar chart with a fixed y-axisChart.js V2。具有固定 y 轴的条形图
【发布时间】：2017-04-06 06:24:32
【问题描述】：

我希望我的图表具有固定 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);
}});

对于 v.1，但对于 v.2，代码似乎不同

我在文档中没有看到此参数或选项。有什么想法吗？

【问题讨论】：

标签： javascript chart.js

【解决方案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);
    }
}

祝你好运。

【讨论】：