Chart.js-在水平条形图上绘制水平线

Question

我正在尝试获取以下图表，但无法构建它。

我尝试使用this code（使用https://github.com/chartjs/chartjs-plugin-annotation），但是我认为解决方案并不完美。 “Díasmeta”线的值需要可配置，因此必须随着其值的更改和水平条数据集的更改来重新绘制该线。

代码：

<script>        

    var color = Chart.helpers.color;
    var horizontalBarChartData = {
        //labels: ['7', '6', '5', '4', '3', '2', '0'],
        labels: ['5', '3', '2', '1'],
        datasets: [{
            label: 'QTA de bultos',
            backgroundColor: color('#91B643').alpha(0.5).rgbString(),
            borderColor: '#91B643',
            borderWidth: 1,
            data: [
                2,
                7,
                4,
                11
            ]
        }]

    };

    $(document).ready(function () {

        var ctx = document.getElementById('myChart').getContext('2d');
        window.myHorizontalBar = new Chart(ctx, {
            type: 'horizontalBar',
            data: horizontalBarChartData,
            options: {
                // Elements options apply to all of the options unless overridden in a dataset
                // In this case, we are setting the border of each horizontal bar to be 2px wide
                elements: {
                    rectangle: {
                        borderWidth: 2,
                    }
                },
                responsive: true,
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: 'Chart.js Horizontal Bar Chart'
                },
                hover: {
                    animationDuration: 0
                },
                animation: {
                    duration: 1,
                    onComplete: function () {
                        var chartInstance = this.chart,
                        ctx = chartInstance.ctx;

                        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                        ctx.textAlign = 'left';
                        ctx.textBaseline = 'center';

                        this.data.datasets.forEach(function (dataset, i) {
                            var meta = chartInstance.controller.getDatasetMeta(i);
                            meta.data.forEach(function (bar, index) {
                                var data = dataset.data[index];
                                ctx.fillStyle = "#000";
                                ctx.fillText(data, bar._model.x + 5, bar._model.y);
                            });
                        });
                    }
                },
                scales: {
                    yAxes: [{
                            scaleLabel: {
                                display: true,
                                labelString: 'Días en Almacén'
                              },
                            gridLines: {
                                display: false
                            }
                        }
                    ],
                    xAxes: [{
                            gridLines: {
                                display: true
                            },
                            ticks: {
                                beginAtZero: true
                            }
                        }
                    ]
                },
            annotation: {
              annotations: [{
                type: 'line',
                mode: 'horizontal',
                scaleID: 'x-axis-0',
                value: 1,
                borderColor: 'rgb(75, 192, 192)',
                borderWidth: 4,
                label: {
                  enabled: true,
                  content: 'Días meta: 999'
                }
              }]
            }
            }
        });

    }); 

</script>

示例-具有原始数据集

示例-仅更改数据集的一个值

任何帮助将不胜感激，谢谢=）