Блог

Я использую heatmap.js чтобы создать тепловую карту для всех кликов по рассылке электронной почты, и тепловая карта отображается просто отлично. Однако у меня есть дополнительный запрос, в котором я хотел бы отобразить числовое значение, связанное с каждым кругом тепловой карты. Я попытался изменить heatmap.js сценарий для выполнения этой задачи. Изменения, которые я внес (heatmap.js v2.0.5) находятся в функции _drawAlpha.

Прямо под:

 shadowCtx.drawImage(tpl, rectX, rectY);  

Я добавил следующее:

 shadowCtx.font = "bold 35px sans-serif";  shadowCtx.fillStyle = "#000000";  shadowCtx.globalAlpha = 1;  shadowCtx.fillText(value, rectX 55, rectY 35);  

В какой-то степени это работает, но самая большая проблема, с которой я сталкиваюсь, — это чтение цифр. В идеале я бы хотел, чтобы цифры были напечатаны черным цветом, но я не могу выбрать стиль заполнения. К вашему сведению, я также пробовал shadowCtx.fillStyle = «черный»;. Я не получаю никаких ошибок, он просто не применяет цвет. Единственный способ, которым я могу изменить цвет шрифта для значений, — это настроить globalAlpha. я перепробовал все от .01 до .99, и ни один из них не является действительно желательным. Цвета варьируются от желтого/зеленого/фиолетового до красноватого… Так что в настоящее время это выглядит так:

У меня нет проблем с обновлением шрифта или размера шрифта. Значения смещены вправо, потому что, если я напечатаю их в середине круга тепловой карты, текст будет нечитаемым. В идеале текст должен быть черным, и я мог бы напечатать его прямо в круге тепловой карты, и он появился бы над кругами.

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

Спасибо!