[英]ChartJS and Radar Chart animation
I am using ChartJS to display data but I want to hold the chart animation until it becomes visible on the users screen. 我正在使用ChartJS来显示数据,但我想保留图表动画,直到它在用户屏幕上可见为止。 I have followed the post on How to make the Chart.js animate when scrolled to that section?
我一直关注有关滚动到该部分时如何使Chart.js动画化的文章? but it's not working when I use it with the Radar chart.
但是当我将其与Radar图表配合使用时,它不起作用。 The sample code is below and I have the canvas setup as normal eg canvas id="canvas:
下面是示例代码,我具有正常的画布设置,例如canvas id =“ canvas:
var radarChartData = {
labels: ["x", "x", "x", "x", "x"],
datasets: [{
fillColor: "rgba(255, 97, 10, 0.5)",
strokeColor: "rgb(255, 97, 10)",
pointColor: "rgba(255, 255, 255, 1)",
pointStrokeColor: "rgba(255, 255, 255, 1)",
data: [48, 46, 47, 48, 38]
}]
}
var inView = false;
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemTop <= docViewBottom) && (elemBottom >= docViewTop));
}
$(window).scroll(function () {
if (isScrolledIntoView('#canvas')) {
if (inView) {
return;
}
inView = true;
newChart(document.getElementById("canvas").getContext("2d")).Radar(radarChartData, {
scaleShowLabels: false,
scaleShowLabelBackdrop: false,
scaleFontColor: "#fff",
pointLabelFontSize: 14,
pointLabelFontColor: "#fff",
angleLineColor: "rgba(163, 165, 93,0.8)",
scaleLineColor: "rgba(163, 165, 93,0.5)"
});
} else {
inView = false;
}
});
You need to move your scripts 您需要移动脚本
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/Chart.js"></script>
to the top before the </head>
to avoid any possible script clash and as I said in my comment, you have a typo: 到
</head>
之前的顶部,以避免任何可能的脚本冲突,并且正如我在评论中所说,您有错别字:
newChart
instead of the correct one new Chart
newChart
而不是正确的一张new Chart
Worked for me : yeah as Yannis pointed out it has to be new Chart (instantiating the Chart object) see here and scroll down : 对我有用:是的,正如Yannis指出的,它必须是新的Chart(实例化Chart对象),请参见此处并向下滚动:
http://jsfiddle.net/HFS7v/ http://jsfiddle.net/HFS7v/
var radarChartData = {
labels: ["x", "x", "x", "x", "x"],
datasets: [{
fillColor: "rgba(255, 97, 10, 0.5)",
strokeColor: "rgb(255, 97, 10)",
pointColor: "rgba(255, 255, 255, 1)",
pointStrokeColor: "rgba(255, 255, 255, 1)",
data: [48, 46, 47, 48, 38]
}]
}
var inView = false;
function isScrolledIntoView(elem)
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemTop <= docViewBottom) && (elemBottom >= docViewTop));
}
$(window).scroll(function () {
if (isScrolledIntoView('#canvas')) {
if (inView) {
return;
}
inView = true;
new
Chart(document.getElementById("canvas").getContext("2d")).Radar(radarChartData, {
scaleShowLabels: false,
scaleShowLabelBackdrop: false,
scaleFontColor: "#fff",
pointLabelFontSize: 14,
pointLabelFontColor: "#fff",
angleLineColor: "rgba(163, 165, 93,0.8)",
scaleLineColor: "rgba(163, 165, 93,0.5)"
});
} else {
inView = false;
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.