Question

我在使图表正确缩放和遮挡方面遇到了一些麻烦。

我希望阴影从0开始。换句话说，对于正值，它应该只在X轴上方遮蔽;仅适用于X轴以下的负值。

但我希望比例相对于实际值。

如果我将scaleBeginAtZero设置为false（默认值），那么这就是图表的样子。请注意，它从底部-10开始着色，因此它具有误导性，并且看起来所有值都是正值。

如果我将scaleBeginAtZero设置为true，则它会正确地显示正面和负面，但最低值为0且0以下的任何内容都会被切断（并且不显示工具提示）

这就是我想要实现的目标（大致从第一张图表中找到了照片）。比例与第一个图表相同，但阴影从0轴开始。

Answer 1

你可以通过挂钩第一个点的draw函数来做到这一点（因为你基本上关闭了线所绘制的路径来完成填充）并使用y = 0点来关闭路径，就像这样。

Chart.types.Line.extend({
    name: "LineAlt",
    initialize: function (data) {
        Chart.types.Line.prototype.initialize.apply(this, arguments);

        var scale = this.scale;
        var firstDataset = this.datasets[0];
        var firstPoint = firstDataset.points[0];
        var min = (scale.min > 0 ? scale.min : (scale.max > 0 ? 0 : scale.max));

        originalDraw = firstPoint.draw;
        firstPoint.draw = function () {
            ctx.lineTo(firstDataset.points[firstDataset.points.length - 1].x, scale.calculateY(min));
            ctx.lineTo(firstDataset.points[0].x, scale.calculateY(min));
            ctx.fillStyle = firstDataset.fillColor;
            ctx.closePath();
            ctx.fill();

            return originalDraw.apply(this, arguments);
        }
    }
});

你还必须关闭datasetFill选项（因为我们自己做）

var myChart = new Chart(ctx).LineAlt(data, {
    datasetFill: false
});

如果您还想移动x轴标签，最简单的方法是关闭当前标签，然后使用xLabels集合绘制您自己的标签

小提琴 - http://jsfiddle.net/dnpo61tu/

阴影从0开始但不是缩放

1 个答案: