Javascript Chart.js-使用相反的条形图绘制图表-如何将y轴两端设置为正数？

我想画一个像这样有相反条线的图表（请忽略黄色部分）：

这是我使用Chart.js的尝试：

您可以看到有两件事需要解决：

蓝条和红条应该堆叠起来

y轴的两端应显示正数

如何实现这些目标？

您可以使用和功能生成所需的结果

var ctx=document.getElementById（'wrapper'）.getContext（'2d'）；
var图表=新图表（ctx{
//我们要创建的图表类型
类型：'bar'，
//我们的数据集的数据
数据：{
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[{
标签：“我的第一个数据集”，
背景颜色：“rgb（255，99，132）”，
边框颜色：“rgb（255，99，132）”，
数据：[0,10,5,2,20,30,45]，
堆栈：“a”
}, {
标签：“我的第二个数据集”，
背景颜色：“rgb（2，99，132）”，
边框颜色：“rgb（2，99，132）”，
数据：[-10，-110，-15，-12，-120，-130，-145]，
堆栈：“b”
}]
},
//配置选项在这里
选项：{
比例：{
xAxes：[{
是的
}],
雅克斯：[{
对,，
滴答声：{
回调：函数（值、索引、值）{
返回值<0？-值：值；
}
}
}]
}
}
});

var ctx = document.getElementById('wrapper').getContext('2d');
var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'bar',

    // The data for our dataset
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: "My First dataset",
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45],
            stack: 'a'
        }, {
            label: "My Second dataset",
            backgroundColor: 'rgb(2, 99, 132)',
            borderColor: 'rgb(2, 99, 132)',
            data: [-10, -110, -15, -12, -120, -130, -145],
            stack: 'b'
        }]
    },

    // Configuration options go here
    options: {
        scales: {
            xAxes: [{
                stacked: true
            }],
            yAxes: [{
                stacked: true,
                ticks: {
                    callback: function (value, index, values) {
                        return value < 0 ? -value : value;
                    }
                }
            }]
        }
    }
});