Javascript 如何在chart.js中为条形图绘制基线

我有一张这样的条形图

我需要画水平虚线看下面

我正在使用ChartJS创建这个图。请帮我画这条底线

var ctx = document.getElementById("baseLinebar");

var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["25", "60", "15", "30"],
        datasets: [{
            data: [25, 60, 15, 30],
            backgroundColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)'
            ]
        }]
    },
    options: {
        scales: {
            xAxes: [{
                        gridLines: {
                            display:false
                        },
                        barThickness:40
                    }],
            yAxes: [{
                        gridLines: {
                            display:false
                        }
                    }]

       }
    }
});

像这样试试

js确实有混合图表

文件：

var ctx=document.getElementById（“myChart”）.getContext（“2d”）；
var myChart=新图表（ctx{
类型：'bar'，
数据：{
标签：['25'，'60'，'45']，
数据集：[
{
键入：“行”，
标签：“基线”，
数据：[15,15,15]
},
{
类型：'bar'，
标签：'标记'，
数据：[25,60,45]，
背景颜色：[
"rgba(255,99,132,1)",，
“rgba（54162235,1）”，
‘rgba（255、206、86、1）’
]
}
]
},
选项：{
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
}
}
});
.container{
宽度：80%；
利润率：15px自动；
}

像这样试试

js确实有混合图表

文件：


var ctx=document.getElementById（“myChart”）.getContext（“2d”）；
var myChart=新图表（ctx{
类型：'bar'，
数据：{
标签：['25'，'60'，'45']，
数据集：[
{
键入：“行”，
标签：“基线”，
数据：[15,15,15]
},
{
类型：'bar'，
标签：'标记'，
数据：[25,60,45]，
背景颜色：[
"rgba(255,99,132,1)",，
“rgba（54162235,1）”，
‘rgba（255、206、86、1）’
]
}
]
},
选项：{
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
}
}
});
.container{
宽度：80%；
利润率：15px自动；
}
这里我们使用了
HorizonalInPlugin
并将其注册到
图表插件服务中。您可以使用
horizontalLine
作为
config
中
选项的属性。用这个

JS

var config = {
                type: 'bar',
                data: {
                    labels: ["25", "60", "15", "30"],
                    datasets: [{
                        data: [25, 60, 15, 30],
                        backgroundColor: [
                            'rgba(255, 99, 132, 1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)'
                        ]
                    }]
                },
                options: {
                    scales: {
                        xAxes: [{
                            gridLines: {
                                display: true
                            },
                            barThickness: 40,
                            stacked: true

                        }],
                        yAxes: [{
                            gridLines: {
                                display: true
                            },
                            stacked: true

                        }]

                    },
                    horizontalLine: [{
                        y: 50,
                        style: "rgba(255, 0, 0, .4)",
                        text: "max"
                    },  {
                        y: 15,
                        text: "min"
                    }]
                }
            };

            ;
            var ctx = document.getElementById("canvas");

            var horizonalLinePlugin = {
                afterDraw: function (chartInstance) {
                    var yScale = chartInstance.scales["y-axis-0"];
                    var canvas = chartInstance.chart;
                    var ctx = canvas.ctx;
                    var index;
                    var line;
                    var style;

                    if (chartInstance.options.horizontalLine) {
                        for (index = 0; index < chartInstance.options.horizontalLine.length; index++) {
                            line = chartInstance.options.horizontalLine[index];

                            if (!line.style) {
                                style = "rgba(169,169,169, .6)";
                            } else {
                                style = line.style;
                            }

                            if (line.y) {
                                yValue = yScale.getPixelForValue(line.y);
                            } else {
                                yValue = 0;
                            }

                            ctx.lineWidth = 3;

                            if (yValue) {
                                ctx.beginPath();
                                ctx.moveTo(0, yValue);
                                ctx.lineTo(canvas.width, yValue);
                                ctx.strokeStyle = style;
                                ctx.stroke();
                            }

                            if (line.text) {
                                ctx.fillStyle = style;
                                ctx.fillText(line.text, 0, yValue + ctx.lineWidth);
                            }
                        }
                        return;
                    };
                }
            };
            Chart.pluginService.register(horizonalLinePlugin);

            var myChart = new Chart(ctx, config);

var配置={
类型：'bar'，
数据：{
标签：[“25”、“60”、“15”、“30”]，
数据集：[{
数据：[25,60,15,30]，
背景颜色：[
"rgba(255,99,132,1)",，
“rgba（54162235,1）”，
"rgba(255,206,86,1)",，
'rgba（751921921）'
]
}]
},
选项：{
比例：{
xAxes：[{
网格线：{
显示：真
},
巴特希克内斯：40岁，
是的
}],
雅克斯：[{
网格线：{
显示：真
},
是的
}]
},
水平线：[{
y:50，
样式：“rgba（255,0,0,4）”，
文本：“最大值”
},  {
y:15，
文本：“min”
}]
}
};
;
var ctx=document.getElementById（“画布”）；
var HorizonalInPlugin={
afterDraw:函数（chartInstance）{
var yScale=chartInstance.scales[“y轴-0”]；
var canvas=chartInstance.chart；
var ctx=canvas.ctx；
var指数；
var线；
var风格；
if（chartInstance.options.horizontalLine）{
对于（索引=0；索引
这里我们使用了
HorizonalInPlugin
并将其注册到
图表插件服务中。您可以使用
horizontalLine
a