有没有办法让apexchart工具提示成为一个可点击的vuejsjavascript

Question

我正在尝试使用Apexharts条形图来可视化数据。在那里，工具提示工作得很好，但需要添加链接到工具提示，这样我就可以单击这些并转到该网站。有没有什么方法可以做到这一点。这是我现在正在使用的代码片段。

let chartDomainData = [];
function getDomainDataFromIndex(index) {
return chartDomainData[index];
}

tooltip: {
enabled: true,
custom: function ({dataPointIndex}) {
return `<div class="arrow-box
${
getDomainDataFromIndex(dataPointIndex).label === "low"
? "bg-yellow"
: "bg-blue"
}
">
<p> Label=
${getDomainDataFromIndex(dataPointIndex).label} credibility
</p>
<p> No of tweets=
${getDomainDataFromIndex(dataPointIndex).y}
</p>
<p> Website=
${getDomainDataFromIndex(dataPointIndex).x}
</p>
<p> Source=
${getDomainDataFromIndex(dataPointIndex).platform}
</p>
</div>`;
},
},

有谁能帮我弄清楚这件事吗。

Answer 1

如果您的工具提示内容正确显示了您的html，您应该能够简单地向其添加<a>链接。

我不知道你希望它如何工作，例如，如果你想在工具提示的末尾显示一个链接，你可以在<p> Source= ...</p>:之后添加

<a :href="yourLink">website</a>

如果你想把你的整个工具提示重定向到一个网站，你可以尝试一下：

tooltip: {
enabled: true,
custom: function ({dataPointIndex}) {
return `<a href="yourLink"><div class="arrow-box
${
getDomainDataFromIndex(dataPointIndex).label === "low"
? "bg-yellow"
: "bg-blue"
}
">
<p> Label=
${getDomainDataFromIndex(dataPointIndex).label} credibility
</p>
<p> No of tweets=
${getDomainDataFromIndex(dataPointIndex).y}
</p>
<p> Website=
${getDomainDataFromIndex(dataPointIndex).x}
</p>
<p> Source=
${getDomainDataFromIndex(dataPointIndex).platform}
</p>
</div></a>`;
},
},