在horizo​​ntalBar上绘制值为2.0的垂直线

Question

我正在尝试绘制垂直线，但直到现在都没有显示。只是旧的水平条形图显示。我正在使用Chart.js注释插件，但仍然没有出现，控制台中没有显示错误。我在某种程度上遵循这个Jsfiddle example但不完全是这个但是如果在这个我可以在点2.0上产生垂直线？

var ctxViolations = document.getElementById("myChartViolations");
var options = {
    scaleLabel: function(object) {
        return "      " + object.value;
    },
    responsive: true,
    pointDot: false
};

var myChartViolations = new Chart(ctxViolations, {
type: 'horizontalBar',

data: {
    labels: violations_labels,
    datasets: [{
            label: '# of Violations',
            showTooltip: true,
            data: violations_count_values,
            backgroundColor: '#ccccff',
            borderColor: '#000000',
            borderWidth: 0,
            fill: false
        },
        {
            type: 'line',
            label: 'Excessive Violations > 3',
            backgroundColor: '#ff0000',
            borderColor: '#ff0000',
            borderWidth: 0,
            pointStyle: 'line',
            data: [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3]
        }
    ]
},
options: {
    responsive: true,

    scales: {
        yAxes: [{
            display: true,
            scaleLabel: {
                display: true,
                // labelString: 'Violation Type'
            },
            ticks: {
                beginAtZero: true,
                fixedStepSize: 1
            }
        }],
        xAxes: [{
            display: true,
            scaleLabel: {
                display: true,
                labelString: 'Violation Count'
            },
            ticks: {
                autoSkip: false,
            },
            position: 'bottom'
        }]
    },
    hover: {
        mode: 'dataset'
    },
    title: {
        display: true,
        text: $scope.EstablishmentName.substring(0, 25) + ' Violations'
    },
    annotation: {
        annotations: [{
            type: 'line',
            mode: 'vertical',
            scaleID: 'x-axis-0',
            value: 2,
            borderColor: 'green',
            borderWidth: 3
        }]
    },

    tooltips: {
        mode: 'label'
    }
}
});

});

}

想在3.0上添加行

Answer 1

这是一个有效的JSFiddle。只更改为您发布的代码是这两个变量的随机数据，并将注释中的value属性更改为3

annotations: [{
            type: 'line',
            mode: 'vertical',
            scaleID: 'x-axis-0',
            value: 3, // <---
            borderColor: 'green',
            borderWidth: 3
        }]