Question

我正在使用ChartJS来显示数据，但我想保留图表动画，直到它在用户屏幕上显示为止。我已经关注了How to make the Chart.js animate when scrolled to that section?上的帖子，但是当我将它与雷达图表一起使用时，它不起作用。示例代码如下，我的画布设置正常，例如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;
    }
});

Answer 1

您需要移动脚本

<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/Chart.js"></script>

到</head>之前的顶部，以避免任何可能的脚本冲突，正如我在评论中所说，你有一个拼写错误：

newChart而不是正确的new Chart

Answer 2

为我工作：是的，因为Yannis指出它必须是新的Chart（实例化Chart对象）看到这里并向下滚动：

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;
    }
});

ChartJS和雷达图表动画

2 个答案: