【chart.js】折线图给点添加点击事件

var mychart = new Chart(
ctx,{
type:''line",

options:{
hover:{
// 此处最重要,决定是否能选中绑定的点
mode:“nearest”
}

onClick:function(event,elements){
// 此为 被点击 的点
firstelement = elements[0]
// 这个点 属于第几个数据集合
dataindex = firstelement._datasetIndex
// 这个点属于数据集合中第几个点
index = firstelement.index
}
}
}
)

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个基于Three.js绘制折线图的完整代码示例: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Three.js Line Chart</title> <style> body { margin: 0; overflow: hidden; } canvas { width: 100%; height: 100%; } </style> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> <script> const data = [ { x: 0, y: 0 }, { x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: 1 }, { x: 4, y: 3 }, { x: 5, y: 2 }, { x: 6, y: 4 }, { x: 7, y: 3 }, { x: 8, y: 5 }, { x: 9, y: 4 } ]; const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); const material = new THREE.LineBasicMaterial({ color: 0x0000ff }); const geometry = new THREE.Geometry(); for (let i = 0; i < data.length; i++) { geometry.vertices.push(new THREE.Vector3(data[i].x, data[i].y, 0)); } const line = new THREE.Line(geometry, material); scene.add(line); function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate(); </script> </body> </html> ``` 这个例子中,我们创建了一个包含10个的数据集,然后使用Three.js创建了一个二维折线图。我们使用了`THREE.Line`对象,并将其添加到了场景中。在动画循环中,我们不断地渲染场景。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值