Как рисовать горизонтальные линии с помощьюchart.js 3.x? Не могу заставить его работать ⇐ Jquery

[Anonymous]

Цель
Я хотел бы создать график, состоящий из трех горизонтальных линий, перекрывающих мою фактическую линию набора данных, с помощью Chart.js 3.x путем интеграции CDN в моя html-страница.
Итак, у меня нет собственной установки Chart.js, но я использую CDN. До сих пор у меня не было реальных проблем с использованием самой последней бета-версии Chart.js 3.x таким образом.
Важное примечание: Поскольку мне нужны некоторые это дополнительные бета-функции, я не могу вернуться к стабильной версии Chart.js 2.x.
Ожидаемый результат
Вот как он должен быть одинаковым.
Фактический результат
У меня нет проблем с созданием фактического линейного графика на основе моего набора данных с использованием Chart.js версии 3.0.0-beta.6.
Если вы прокомментируете строку 64 раздела JavaScript Fiddle, вы увидите работающий базовый график.
Но, к сожалению, Я не могу нарисовать горизонтальные линии!
То, что я пробовал до сих пор
Jsfiddle – не работает р>

Код: Выделить всё

.container{
position: relative;
width: 50vw;
}






var canvas = document.getElementById("myChart");
var ctx = canvas.getContext("2d");

var horizonalLinePlugin = {
id: 'horizontalLine',
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;
}
}
};

var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "MyDataset01",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
data: [65, 59, 80, 81, 56, 55, 40],
}]
};

//When uncommenting below line, graph is created without horizontal lines
Chart.register(horizonalLinePlugin);
var myChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
"horizontalLine": [{
"y": 75.8,
"style": "#ff0000",
"text": "upper-limit"
}, {
"y": 62.3,
"style": "#00ff00",
"text": "avg"
}, {
"y": 48.8,
"style": "#0000ff",
"text": "lower-limit"
}]
}
});

Я читал документацию Chart.js и рабочие примерыchartjs-annotation-plugin, но, к сожалению, все они основаны только на Chart.js версии 2.x.
Мне не удалось заставить его работать в ближайшее время, пытаясь использовать CDN https://cdnjs.cloudflare.com/ajax/libs/ ... 6/chart.js и
https://cdnjs.cloudflare.com/ajax/libs/chartjs- плагин-аннотация/0.5.7/chartjs-plugin-annotation.js вместе. Не нашел ни одного работающего, например. Пример скрипта.
И теперь я безуспешно попытался использовать встроенный плагин Chart.js, получив, например, сообщение об ошибке

Строка 8 в разделе JavaScript Fiddle: «#55:15 TypeError: холст не определен»


Подробнее здесь: https://stackoverflow.com/questions/650 ... it-working