Добавить всплывающую подсказку при наведении на диаграмму JavaScript ⇐ Javascript

[Гость]

Я работаю с приведенным ниже кодом уже много лет. Он рисует простую диаграмму на основе данных других скриптов. Иногда я модифицирую его для конкретной задачи. Теперь я хотел бы добавить всплывающую подсказку для точек с фактическим значением, но теперь знаю, как это сделать. Я работаю с приведенным ниже кодом уже много лет. Он рисует простую диаграмму на основе данных других скриптов. Иногда я модифицирую его для конкретной задачи. Сейчас я хотел бы добавить всплывающую подсказку для точек с реальным значением, но теперь знаю, как это сделать.

Отчет //диаграмма функция LineChart (конфигурация) { // определяемые пользователем свойства this.canvas = document.getElementById(config.canvasId); this.minX = config.minX; this.minY = config.minY; this.maxX = config.maxX; this.maxY = config.maxY; this.unitsPerTickX = config.unitsPerTickX; this.unitsPerTickY = config.unitsPerTickY; this.caption = config.caption; this.Xcaption = config.Xcaption; this.Ycaption = config.Ycaption; this.title2 = config.title; this.label = config.labels; // константы this.padding = 10; this.tickSize = 10; this.axisColor = "#555"; this.pointRadius = 3; this.font = "Калибри 12pt"; /* * MeasureText не определяет высоту текста. * метрика, поэтому нам придется жестко запрограммировать высоту текста * ценить */ this.fontHeight = 12; // отношения this.context = this.canvas.getContext("2d"); этот.диапазонX = этот.maxX - этот.minY; this.rangeY = this.maxY - this.minY; this.numXTicks = Math.round(this.rangeX / this.unitsPerTickX); this.numYTicks = Math.round(this.rangeY / this.unitsPerTickY); this.x = this.getLongestValueWidth() + this.padding * 4; this.y = this.padding * 8; this.width = this.canvas.width - this.x - this.padding * 5; this.height = this.canvas.height - this.y - this.padding * 5 - this.fontHeight; this.scaleX = this.width / this.rangeX; this.scaleY = this.height / this.rangeY; // рисуем ось x y и отметки это.drawXAxis(); это.drawYAxis(); } LineChart.prototype.getLongestValueWidth = function(){ this.context.font = this.font; вар longestValueWidth = 0; for (var n = 0; n =24) { label=label-24}; контекст.сохранить(); context.translate((n + 0) * this.width / this.numXTicks + this.x, this.y + this.height + this.padding); context.fillText(метка, 0, 0); контекст.восстановление(); } // рисуем метки осей context.textAlign = "право"; context.textBaseline = "дно"; context.fillText(this.Xcaption, this.width + 8 * this.padding, this.height + 13 * this.padding); context.textAlign = "влево"; context.textBaseline = "сверху"; context.fillText(this.Ycaption, 3 * this.padding, 5 * this.padding); context.textAlign = "влево"; context.textBaseline = "дно"; context.font = 'жирный шрифт 9pt Calibri'; context.fillText(this.caption, 65, this.height + 13 * this.padding); context.textAlign = "влево"; context.textBaseline = "сверху"; context.font = 'жирный шрифт Calibri, 16pt'; context.fillText(this.title2, (this.width/2)-80, 10); контекст.восстановление(); }; LineChart.prototype.drawYAxis = функция(){ вар контекст = this.context; контекст.сохранить(); контекст.сохранить(); контекст.beginPath(); context.moveTo(this.x, this.y); context.lineTo(this.x, this.y + this.height); context.strokeStyle = this.axisColor; context.lineWidth = 2; контекст.ход(); контекст.восстановление(); // рисуем деления for (var n = 0; n