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

回到顶部