图表工具提示自动隐藏
图表工具提示自动隐藏
提问于 2019-11-07 23:21:52
目前我有一个气泡图，我正在使用工具提示来显示有关气泡的更多信息。我需要工具提示保持可见，当用户单击一个按钮将图表导出为图像。我已经将autoHide属性设置为false，但它似乎没有任何效果。我的工具提示没有显示关闭按钮
我尝试将autoHide: false添加到图表的工具提示配置中，但没有产生任何效果。
series: [{
type: "bubble",
xField: "CurrentLossEstUSD",
yField: "CurrentScore",
sizeField: "MFL_TOTAL",
color: "#dadfe1",
tooltip: {
visible: true,
format: "{3}: MFL - {2:N0}",
autoHide: false
},
}]基本上，我需要工具提示保持打开状态，当用户单击将图表转换为图像的按钮时，如果没有关闭autoHide功能，工具提示会在鼠标移出图表容器时消失
回答 1
Stack Overflow用户
发布于 2019-11-08 17:26:51
图表的工具提示中没有自动隐藏属性(或类似的属性/方法)。欲了解更多信息，请访问kendo ui Chart document
据我所知，在kendo-ui中没有这样的功能，但是如果你愿意，你可以使用标签属性。为了参考，请找到下面的代码片段。
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.default.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.default.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.3.911/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.911/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content wide">
<div id="chart"></div>
<ul class="k-content">
<li>Circle size shows number of job applicants</li>
<li>Vertical position shows number of employees</li>
<li>Horizontal position shows job growth</li>
</ul>
</div>
<script>
function createChart() {
$("#chart").kendoChart({
title: {
text: "Job Growth for 2011"
},
legend: {
visible: false
},
seriesDefaults: {
labels: {
visible: true,
position: "outsideEnd",
},
type: "bubble"
},
series: [{
data: [{
x: -2500,
y: 50000,
size: 500000,
category: "Microsoft"
}, {
x: 500,
y: 110000,
size: 7600000,
category: "Starbucks"
}, {
x: 7000,
y: 19000,
size: 700000,
category: "Google"
}, {
x: 1400,
y: 150000,
size: 700000,
category: "Publix Super Markets"
}, {
x: 2400,
y: 30000,
size: 300000,
category: "PricewaterhouseCoopers"
}, {
x: 2450,
y: 34000,
size: 90000,
category: "Cisco"
}, {
x: 2700,
y: 34000,
size: 400000,
category: "Accenture"
}, {
x: 2900,
y: 40000,
size: 450000,
category: "Deloitte"
}, {
x: 3000,
y: 55000,
size: 900000,
category: "Whole Foods Market"
}]
}],
xAxis: {
labels: {
format: "{0:N0}",
skip: 1,
rotation: "auto"
},
axisCrossingValue: -5000,
majorUnit: 2000,
plotBands: [{
from: -5000,
to: 0,
color: "#00f",
opacity: 0.05
}]
},
yAxis: {
labels: {
format: "{0:N0}"
},
line: {
width: 0
}
},
tooltip: {
visible: true,
format: "{3}: {2:N0} applications",
opacity: 1
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
<style>
.demo-section {
position: relative;
}
.demo-section ul {
font-size: 11px;
margin: 63px 30px 0 0;
padding: 30px;
position: absolute;
right: 0;
top: 0;
text-transform: uppercase;
width: 146px;
height: 94px;
}
</style>
</div>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58751874
复制相关文章
相似问题
腾讯云开发者
