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

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

}

祝你好运。

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

1 个答案: