Highcharts 图表点击出一个弹窗

南玖i

已于 2024-08-16 09:02:21 修改

阅读量215

点赞数 2

文章标签：前端 javascript html

于 2024-08-15 15:42:22 首次发布

本文链接：https://blog.csdn.net/m0_49789433/article/details/141221970

版权

单击页点击定义一个字段 tooltipDiv

events: {

   click: function (event){
//没有接口 直接写tooltipDiv.value.style != undefined 
// 如果是接口获取数据 异步刷新慢会导致报错 需要多加一个字段来控制 jinru 下面有一个例子截图
       if(tooltipDiv.value.style != undefined && jinru){
             this.renderTo.removeChild(tooltipDiv.value)
       }

        tooltipDiv.value = document.createElement('div');
        tooltipDiv.value.className = 'custom-tooltip';
        tooltipDiv.value.style.width = '150px'; // 设置提示框宽度
        tooltipDiv.value.style.height = '60px'; // 设置提示框高度
        tooltipDiv.value.style.background = 'rgba(255, 255, 255, 0.7)'; // 设置提示框背景色
        tooltipDiv.value.style.position = 'absolute';
        tooltipDiv.value.style.top = (event.chartY)-60 + 'px'; // 设置提示框位置
        tooltipDiv.value.style.left = (event.chartX) + 20+ 'px';
        tooltipDiv.value.innerHTML = `<div>`+时间+ `</div><div>高度`+xx+`</div><div>消光` +xx+ `</div>`;
         // 将提示框添加到图表容器中
        this.renderTo.appendChild(tooltipDiv.value);
                  


   }

}

如何通过接口赋值这个弹窗数据呢，需要判断一下，有内容就把之前页面的上面的删掉，不然会报错