Javascript 在混合图表中对齐线条和条形图

我正在制作一个混合图表，我需要在条形图上绘制一个阶梯线图。我的直线图中的数据点在一个默认的中间对齐，例如：

我想使线的起点与条形图的起点对齐，如下所示：

我已经阅读了Chartjs的文档，但是我找不到一种方法使行从我的酒吧开始

我设置了一个小示例来进一步解释我的问题：

var opc=$（“#图表”）；
var myChart=新图表（opc{
类型：'bar'，
数据：{
标签：[“项目1”、“项目2”、“项目3”]，
数据集：[{
类型：'bar'，
标签：“条形元件”，
数据：[10,20,30]，
}, {
键入：“行”，
是的，
标签：“线组件”，
数据：[25,5,20]，
填充：假
}]
},
选项：{
比例：{
雅克斯：[{
显示：对，
滴答声：{
suggestedMin:0，//最小值将为0，除非有较低的值。
//或//
beginAtZero:true//最小值将为0。
}
}]
}
}
});我浏览了文档，但找不到任何关于如何修复此问题的信息。我认为通过代码来修复它会相对简单，但我错了，不管怎样，我让它工作起来了，你需要手动更改chart.js源文件中的代码。这是您需要更改的线路

Before（）：

电话号码：12891

function lineToPoint(previousPoint, point) {
                var vm = point._view;
                if (point._view.steppedLine === true) {
                    ctx.lineTo(point._view.x, previousPoint._view.y);
                    ctx.lineTo(point._view.x, point._view.y);               
                } else if (point._view.tension === 0) {
                    ctx.lineTo(vm.x, vm.y);
                } else {
                    ctx.bezierCurveTo(
                        previousPoint._view.controlPointNextX,
                        previousPoint._view.controlPointNextY,
                        vm.controlPointPreviousX,
                        vm.controlPointPreviousY,
                        vm.x,
                        vm.y
                    );
                }
            }

function lineToPoint(previousPoint, point) {
    var vm = point._view;
    if (point._view.steppedLine === true) {
        ctx.lineTo((point._view.x - previousPoint._view.x)/2 + previousPoint._view.x, previousPoint._view.y);
        ctx.lineTo((point._view.x - previousPoint._view.x)/2 + previousPoint._view.x, point._view.y);   
        ctx.lineTo(point._view.x, point._view.y);           
    } else if (point._view.tension === 0) {
        ctx.lineTo(vm.x, vm.y);
    } else {
        ctx.bezierCurveTo(
            previousPoint._view.controlPointNextX,
            previousPoint._view.controlPointNextY,
            vm.controlPointPreviousX,
            vm.controlPointPreviousY,
            vm.x,
            vm.y
        );
    }
}

之后（chart.js）：

电话号码：12891

function lineToPoint(previousPoint, point) {
                var vm = point._view;
                if (point._view.steppedLine === true) {
                    ctx.lineTo(point._view.x, previousPoint._view.y);
                    ctx.lineTo(point._view.x, point._view.y);               
                } else if (point._view.tension === 0) {
                    ctx.lineTo(vm.x, vm.y);
                } else {
                    ctx.bezierCurveTo(
                        previousPoint._view.controlPointNextX,
                        previousPoint._view.controlPointNextY,
                        vm.controlPointPreviousX,
                        vm.controlPointPreviousY,
                        vm.x,
                        vm.y
                    );
                }
            }

function lineToPoint(previousPoint, point) {
    var vm = point._view;
    if (point._view.steppedLine === true) {
        ctx.lineTo((point._view.x - previousPoint._view.x)/2 + previousPoint._view.x, previousPoint._view.y);
        ctx.lineTo((point._view.x - previousPoint._view.x)/2 + previousPoint._view.x, point._view.y);   
        ctx.lineTo(point._view.x, point._view.y);           
    } else if (point._view.tension === 0) {
        ctx.lineTo(vm.x, vm.y);
    } else {
        ctx.bezierCurveTo(
            previousPoint._view.controlPointNextX,
            previousPoint._view.controlPointNextY,
            vm.controlPointPreviousX,
            vm.controlPointPreviousY,
            vm.x,
            vm.y
        );
    }
}

JSFIDLE供参考：

输出：


我希望这能解决你的问题：）