Highcharts 写 venn图鼠标悬浮效果以及点击事件

效果图如下：

参考highcharts官网venn

具体方法

安装包依赖：npm install highcharts

//组件中引入
import Highcharts from 'highcharts';
// import exportingInit from 'highcharts/modules/exporting';
// exportingInit(Highcharts)
// import stockInit from 'highcharts/modules/stock'
// stockInit(Highcharts)
// 这里的venn.js放到mian.js中去引用
// import venn from 'highcharts/modules/venn'
// venn(HighCharts);

只在上面引入会报错

在main.js中引入venn.js（解决报错）

// 引入hightcharts
import Highchart from "highcharts/highcharts";
// 引入hightcharts中的venn模块（否则韦恩图出不来）
import venn from 'highcharts/modules/venn'
venn(Highchart);

下面具体代码如下：

html代码：这里两个图

      <div id="container"></div><div id="container2"></div>

 Highcharts.chart('container2', {series: [{type: 'venn',name: 'Highcharts Venn',data: [{sets: ['Good'],value: 2}, {sets: ['Fast'],value: 2}, {sets: ['Cheap'],value: 2}, {sets: ['Good', 'Fast'],value: 1,name: 'More expensive'}, {sets: ['Good', 'Cheap'],value: 1,name: 'Will take time to deliver'}, {sets: ['Fast', 'Cheap'],value: 1,name: 'Not the best quality'}, {sets: ['Fast', 'Cheap', 'Good'],value: 1,name: 'They\'re dreaming'}]}],title: {text: 'The Unattainable Triangle'}});var datas = [{sets: ['A'],value: 3,other: '123sfdfzsdfsdf3',}, {sets: ['B'],value: 2,other: '1233',}, {sets: ['C'],value: 4,}, {sets: ['d'],value: 4,}, {sets: ['A', 'B'],value: 1,name: 'A∩B',}, {sets: ['d', 'B'],value: 1,name: 'd∩B',// other:'666',}, {sets: ['A', 'C'],value: 1,name: 'A∩C',}, {sets: ['B', 'C'],value: 1,name: 'B∩C',}, {sets: ['A', 'B', 'C'],value: 1,name: 'A∩B∩C',}];Highcharts.chart('container', {series: [{type: 'venn',data: datas,cursor: 'pointer',showInLegend: false,dataLabels: {enabled: true,align: 'center',style: {color: "black",fontSize: "14px",fontWeight: "bold", //nomaltextOutline: "0px 0px contrast",fontFamily: 'Microsoft YaHei',}},events: {//单击事件click: function (e) {console.log(e.point.name + "：" + e.point.value);alert('点我干啥?就不告诉你：' + e.point.name + "：" + e.point.value)// location.href = "http://www.baidu.com";},}}],title: {text: '韦恩图(Veen)'},subtitle: {text: 'Highcharts Venn',align: 'center',style: {}},tooltip: {backgroundColor: 'rgba(82,82,82,0.8)',borderColor: '#525252',         // 边框颜色borderRadius: 10,             // 边框圆角borderWidth: 0,               // 边框宽度shadow: false,                 // 是否显示阴影animation: true,               // 是否启用动画效果headerFormat: '',pointFormat: `<span style="color:{point.color};font-size:14px;font-family:Microsoft YaHei">\u25CF{point.name}</span><br/><br/><span style="color:white;font-size:14px;font-family:Microsoft YaHei">数量: {point.value}</span><br/><span style="color:white;font-size:14px;font-family:Microsoft YaHei">其他：{point.other}</span><br/>`// +'占比: <b style="font-size: 14px,color:#eee">{point.percentage:.2f}%</b><br/>'}});

单独的html文件写highcharts

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="x-ua-compatible" content="ie=edge"><title></title><!-- 注意引种js，以及顺序 --><script src="js/highcharts.js"></script><script src="js/oldie.js"></script><script src="js/venn.js"></script><script src="js/grid-light.js"></script><script src="js/drilldown.js"></script></head><body><div id="container"></div><script>var datas = [{sets: ['A'],value: 3,other: '123sfdfzsdfsdf3',}, {sets: ['B'],value: 2,other: '1233',}, {sets: ['C'],value: 4,}, {sets: ['d'],value: 4,}, {sets: ['A', 'B'],value: 1,name: 'A∩B',}, {sets: ['d', 'B'],value: 1,name: 'd∩B',}, {sets: ['A', 'C'],value: 1,name: 'A∩C',}, {sets: ['B', 'C'],value: 1,name: 'B∩C',}, {sets: ['A', 'B', 'C'],value: 1,name: 'A∩B∩C',}];Highcharts.chart('container', {series: [{type: 'venn',data: datas,cursor: 'pointer',showInLegend: false,dataLabels: {enabled: true,align: 'center',style: {color: "black",fontSize: "14px",fontWeight: "bold", //nomaltextOutline: "0px 0px contrast",fontFamily: 'Microsoft YaHei',}},events: {//单击事件click: function (e) {console.log(e.point.name + "：" + e.point.value);//链接到新页面//window.open('http://www.baidu.com','_self','width=200,height=100');// location.href = "http://www.baidu.com";},}}],title: {text: '韦恩图(Veen)'},subtitle: {text: '数据来源：个人编造',align: 'center',style: {}},tooltip: {backgroundColor: 'rgba(82,82,82,0.8)',borderColor: '#525252',         // 边框颜色borderRadius: 10,             // 边框圆角borderWidth: 0,               // 边框宽度shadow: false,                 // 是否显示阴影animation: true,               // 是否启用动画效果headerFormat: '',pointFormat: `<span style="color:{point.color};font-size:14px;font-family:Microsoft YaHei">\u25CF{point.name}<br/></span><span style="color:white;font-size:14px;font-family:Microsoft YaHei">数量: {point.value}<br/></span><br/><span style="color:white;font-size:14px;font-family:Microsoft YaHei">其他：{point.other}</span><br/>`// +'占比: <b style="font-size: 14px,color:#eee">{point.percentage:.2f}%</b><br/>'}});</script></body></html>

Highcharts 写 venn图（韦恩图），以及解决项目中venn的报错相关推荐

Eclipse和MyEclipse使用技巧--解决MyEclipse中的js报错的小方法
今天,下了个模版,但是导进去的时候发现js会报错.看了下其他都没有错误.而有一个js报错误,请原谅我有点红色强迫症,不能留一点红色 . 错误如下: Syntax error on token &quo ...
解决 vscode中pylint抽风报错问题
解决 vscode中pylint抽风报错问题问题原因主要是pylint再vs中的配置不太对,找不到相关的库,就算一个project中的文件也找不到如何配置? 链接: 原文链接. 首先点击文件- ...
解决maven项目中-Dmaven.multiModuleProjectDirectory报错问题
maven项目中,在run as 执行maven命令的时候,报错: -Dmaven.multiModuleProjectDirectory system property is not set. C ...
解决pycharm中画图工具报错无法显示问题
当我把我的pycharm和anaconda重装了过后,重新配置环境,发现了以前使用import matplotlib.pyplot as plt,画图工具,画不出来,并且还发生了上图的报错,查阅资料发 ...
vue项目中的一些报错解决方法
1.mixed spaces and tabs no-mixed-spaces-and-tabs 禁止使用空格和tab混合缩进:大多数代码约定要求使用空格或 tab 进行缩进.因此,一行代码同时混有 ...
【解决python中使用pillow报错】PermissionError: [WinError 32] 另一个程序正在使用此文件，进程无法访问
项目场景 import os from PIL import Image img = Image.open('test.png') w, h = img.size if w > h:os.rem ...
一步解决word中ctrl-v粘贴报错问题
问题:运行时错误'53':文件未找到:MathPage.WLL 这里只针对MathType引起的加载项冲突原因. 首先关闭word 打开MathType所在文件夹右击MathType图标->点 ...
解决项目莫名奇妙的报错问题
1.将项目clean一下: 2.重新build path配置一下jar包: 3.重新配置source下的内容 4.重新配置一下Libraries下的jar包: 5.如果jre报错重新配置方式如下: 6 ...
Web项目：解决eclipse中jsp文件报错javax.servlet.http.HttpServlet 提示 was not found on the Java Build Path的错误
具体错误如图示如下: 具体结局方案如下: 1.右击web工程(你的项目名字)->属性或Build Path->Java Build Path->Libraries-> Add ...

Highcharts 写 venn图（韦恩图），以及解决项目中venn的报错

文章目录

Highcharts 写 venn图鼠标悬浮效果以及点击事件

具体方法

下面具体代码如下：

单独的html文件写highcharts

Highcharts 写 venn图（韦恩图），以及解决项目中venn的报错相关推荐

最新文章

热门文章

Highcharts 写 venn图 （韦恩图），以及解决项目中venn的报错

文章目录

Highcharts 写 venn图 鼠标悬浮效果以及点击事件

具体方法

下面具体代码如下：

单独的html文件写highcharts

Highcharts 写 venn图 （韦恩图），以及解决项目中venn的报错相关推荐

最新文章

热门文章

Highcharts 写 venn图（韦恩图），以及解决项目中venn的报错

Highcharts 写 venn图鼠标悬浮效果以及点击事件

Highcharts 写 venn图（韦恩图），以及解决项目中venn的报错相关推荐