📅 最后修改于: 2023-12-03 15:16:52.340000 🧑 作者: Mango
jQWidgets jqxChart是一个基于JavaScript的图表插件，可以通过该插件快速创建多种类型的图表。toolTipMoveDuration是jqxChart中用于设置提示框移动动画持续时间的属性。
$('#jqxChart').jqxChart({
toolTipMoveDuration: 500
});
当用户鼠标悬浮在图表上时，jqxChart会在鼠标所在位置显示提示框。在移动提示框时加入动画效果可以增强用户体验，并使图表显示更加平滑自然。toolTipMoveDuration属性用于设置提示框移动动画的持续时间，单位为毫秒，默认值为250。
下面是一个示例，演示如何使用toolTipMoveDuration属性。
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" type="text/css" />
</head>
<body>
<div id="chartContainer"></div>
<script>
$(document).ready(function () {
// 准备数据
const sampleData = [
{ Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
{ Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
{ Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
{ Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
{ Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
{ Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
{ Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];
// 创建jqxChart
$('#chartContainer').jqxChart({
title: "Sales by Day",
description: "Sales Comparison",
enableAnimations: true,
showLegend: true,
padding: { left: 10, top: 5, right: 10, bottom: 5 },
titlePadding: { left: 50, top: 0, right: 0, bottom: 10 },
source: sampleData,
xAxis: {
dataField: 'Day',
unitInterval: 1,
tickMarks: {
visible: true,
interval: 1,
color: '#BCBCBC'
},
gridLines: {
visible: true,
interval: 1,
color: '#BCBCBC'
}
},
valueAxis: {
unitInterval: 10,
title: { text: 'Sales ($)<br>' },
tickMarks: { color: '#BCBCBC' }
},
colorScheme: 'scheme03',
seriesGroups:
[
{
type: 'column',
columnsGapPercent: 50,
seriesGapPercent: 20,
series: [
{ dataField: 'Keith', displayText: 'Keith' },
{ dataField: 'Erica', displayText: 'Erica' },
{ dataField: 'George', displayText: 'George' }
]
}
]
});
});
</script>
</body>
</html>
在该示例中，我们创建了一个展示销售数据的柱状图。我们将toolTipMoveDuration属性设置为500，使提示框移动时以比较缓慢的速度移动。
$('#chartContainer').jqxChart({
...
toolTipMoveDuration: 500,
...
});
通过设置toolTipMoveDuration属性，开发者可以控制jqxChart提示框移动时的动画效果。这可以进一步增强交互体验，并使图表更加流畅。值得注意的是，toolTipMoveDuration值设置的过大或过小都可能会影响用户体验，需要开发者根据实际情况进行调整。