vue3使用heatmap.js绘制热力图报错?
<div class="heatmapjs-container" ref="heat"></div>
import { ref, reactive, onMounted } from "vue"import h337 from "heatmapjs"
onMounted(() => {
console.log("onMounted")
heatMapInit()
console.log(heat.value)
})
const heat = ref(null)
const heatmap = ref()
// 初始化 heat map
const heatMapInit = () => {
let heatmapInstance = h337.create({ container: heat.value })
var points = []
var max = 0
var width = 840
var height = 400
var len = 200
while (len--) {
var val = Math.floor(Math.random() * 100)
max = Math.max(max, val)
var point = {
x: Math.floor(Math.random() * width),
y: Math.floor(Math.random() * height),
value: val
}
points.push(point)
}
// heatmap data format
var data = {
max: max,
data: points
}
// if you have a set of datapoints always use setData instead of addData
// for data initialization
heatmapInstance.addData(data)
}
使用报错:
heatmap.min.js:9 Uncaught (in promise) TypeError: Cannot assign to read only property 'data' of object '#<ImageData>' at d2._colorize (heatmap.min.js:9:6235)
at d2.renderPartial (heatmap.min.js:9:4158)
at heatmap.min.js:9:6929
at a2.emit (heatmap.min.js:9:7041)
at d2.addData (heatmap.min.js:9:1681)
at g2.addData (heatmap.min.js:9:7804)
at heatMapInit (heatmap.vue:44:1)
at heatmap.vue:13:1
at runtime-core.esm-bundler.js:2675:88
at callWithErrorHandling (runtime-core.esm-bundler.js:158:18)
回答:
看报错,在heatmap.min.js的某个函数里想修改一个只读属性'data'。这个错误可能是因为heatmap.js库的某个版本与Vue 3不兼容。
试试用:
heatmapInstance.setData(data)
以上是 vue3使用heatmap.js绘制热力图报错? 的全部内容, 来源链接: utcz.com/p/934879.html