所以我对编码非常陌生，但是一位朋友让我帮助他们制作一个雷达图来展示他们的技能。我在网上找到了一个示例，我对其进行了一些更改以根据他们的需求进行自定义。我遇到的问题是弄清楚如何为其设置动画。我想做的是让每个绘图点一次移出一个，直到图表完全展开。然后我试图让它们中的每一个从最终值（即 65）崩溃回 0，然后再次重复扩展过程。所以基本上我希望它们一次展开一个，然后在它们全部展开后一一折叠，直到回到零，然后再次展开并不断重复（如果可能）。我不确定这是否可能或太多。我在网上寻找过任何类型的动画，至少可以一一展开，但我找不到任何东西。我包括以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Radar Chart in JavaScript</title>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-radar.min.js"></script>
<style type="text/css">
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
anychart.onDocumentReady(function () {
// create a data set
var chartData = {
rows: [
['Advertising', 33],
['Branding', 34],
['Creative Problem-Solving', 17],
['Digital Marketing', 50],
['Research', 24],
['SEO', 11],
['Social Media Marketing', 59],
['Strategy', 43],
['UI', 22],
['UX', 73]
]
};
// create a radar chart
var chart = anychart.radar();
// set the series type
chart.defaultSeriesType('area');
// set the chart data
chart.data(chartData);
// set the color palette
chart.palette(['#9BC53DE6']);
// configure the appearance of the y-axis
chart.yAxis().stroke('#000000');
chart.yAxis().ticks().stroke('#000000');
// configure the stroke of the x-grid
chart.xGrid().stroke({
color: "#545f69",
thickness: 0.5,
dash: "10 5"
});
// configure the appearance of the y-grid
chart.yGrid().palette(['gray 0.05', 'gray 0.025']);
// begin the y-scale at 0
chart.yScale().minimum(0);
// set the y-scale ticks interval
chart.yScale().ticks().interval(10);
// set the hover mode
chart.interactivity().hoverMode('by-x');
// set the marker type
chart.markerPalette(['star5']);
// improve the tooltip
chart.tooltip()
.displayMode('union')
.useHtml(true)
.format(function(e){
console.log(this);
return '<span style="color:' + this.series.color() + '">' +
this.seriesName + ": " + this.value + "</span>"
});
// set chart legend settings
chart.legend()
.align('center')
.position('center-bottom')
.enabled(false);
// set the chart title
chart.title("Services");
// set container id for the chart
chart.container('container');
// initiate chart drawing
chart.draw();
});
</script>
</body>
</html>
如果可能的话，请为我提供有关如何编写此类代码的帮助。我需要将其包含在此代码中，因为他们需要一个可以上传到其 Wix 网站的 html 文件。
我不确定这是否可行，但我真的很感激我可以使用的任何帮助或代码。
非常感谢您的时间和帮助。
我试了一下，这是您要找的吗？请注意，速度和步长变量是可调的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Radar Chart Animation</title>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-radar.min.js"></script>
<style type="text/css">
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
anychart.onDocumentReady(function () {
var originalData = {
rows: [
['Advertising', 33],
['Branding', 34],
['Creative Problem-Solving', 17],
['Digital Marketing', 50],
['Research', 24],
['SEO', 11],
['Social Media Marketing', 59],
['Strategy', 43],
['UI', 22],
['UX', 73]
]
};
var zeroData = {
rows: [
['Advertising', 0],
['Branding', 0],
['Creative Problem-Solving', 0],
['Digital Marketing', 0],
['Research', 0],
['SEO', 0],
['Social Media Marketing', 0],
['Strategy', 0],
['UI', 0],
['UX', 0]
]
};
var speed = 80; // speed in ms (smaller is faster)
var step = 3; // adjust as needed
// create a radar chart
var chart = anychart.radar();
// set the series type
chart.defaultSeriesType('area');
// set the color palette
chart.palette(['#9BC53DE6']);
// configure the appearance of the y-axis
chart.yAxis().stroke('#000000');
chart.yAxis().ticks().stroke('#000000');
// configure the stroke of the x-grid
chart.xGrid().stroke({
color: "#545f69",
thickness: 0.5,
dash: "10 5"
});
// configure the appearance of the y-grid
chart.yGrid().palette(['gray 0.05', 'gray 0.025']);
// begin the y-scale at 0
chart.yScale().minimum(0);
// set the y-scale ticks interval
chart.yScale().ticks().interval(10);
// set the hover mode
chart.interactivity().hoverMode('by-x');
// set the marker type
chart.markerPalette(['star5']);
// improve the tooltip
chart.tooltip()
.displayMode('union')
.useHtml(true)
.format(function(e){
console.log(this);
return '<span style="color:' + this.series.color() + '">' +
this.seriesName + ": " + this.value + "</span>"
});
// set chart legend settings
chart.legend()
.align('center')
.position('center-bottom')
.enabled(false);
// set the chart title
chart.title("Services");
// set container id for the chart
chart.container('container');
// initiate chart drawing
chart.draw();
// Animation Function
function animateChart(fromData, toData) {
var data = JSON.parse(JSON.stringify(fromData));
var index = 0;
var expandingInterval = setInterval(function() {
if (index < data.rows.length) {
var targetValue = toData.rows[index][1];
if (data.rows[index][1] < targetValue) {
data.rows[index][1] += step;
chart.data(data);
chart.draw();
} else {
index++;
}
} else {
clearInterval(expandingInterval);
var collapsingIndex = data.rows.length - 1;
var collapsingInterval = setInterval(function() {
if (collapsingIndex >= 0) {
data.rows[collapsingIndex][1] -= step;
chart.data(data);
chart.draw();
if (data.rows[collapsingIndex][1] <= 0) {
data.rows[collapsingIndex][1] = 0;
collapsingIndex--;
if (collapsingIndex < 0) {
clearInterval(collapsingInterval);
animateChart(zeroData, originalData);
}
}
}
}, speed);
}
}, speed);
}
animateChart(zeroData, originalData);
});
</script>
</body>
</html>