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

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

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

Answer 1

你只需要用下面的代码修改fiddle中提到的现有代码。这可能有助于您使用 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);
    }
}

祝你好运。