Question

这是我的第一个问题，我在这里和Google上搜索答案，但无济于事。

我正在为会计公司准备一个网站，他们要求使用一些数据可视化创建一个演示。我选择使用＆＃39; charts.js＆＃39;。

我的问题是，我希望图表仅在屏幕上可见时加载。目前他们都在同时加载，因此你错过了相当不错的动画。

根据我的问题，我希望图表旁边的文字能够轻松获得＆＃39;也是，只有在屏幕上可见时才会显示。

有人会非常友好地指出我在网上找到合适的资料，或者告诉我一个简单的方法来实现这个目标吗？

最诚挚的问候并提前感谢你！

根据要求，我添加的简单代码在屏幕下方显示两个图表。要完成这项工作，您需要从此处获取Chart.js：Chart.js Website

的index.html：

<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Graphs</title>
        <link rel="stylesheet" href="css/main.css">
        <script src="js/Chart.js"></script>
    </head>
    <body>

<div class="graphs">        

            <div class="separator1"></div>


            <div class="graph1">

                    <canvas id="myCanvas" width="475" height="400">Graph 1</canvas>
                    <script>
                    //Get the context of the canvas element we want to select
                    context = document.getElementById('myCanvas').getContext('2d');
var Line = {};
var data = {
    labels : ["January","February","March","April","May","June","July"],
    datasets : [
        {
            fillColor : "rgba(151,57,56,0.5)",
            strokeColor : "rgba(151,57,56,1)",
            pointColor : "rgba(151,57,56,1)",
            pointStrokeColor : "#fff",
            data : [65,59,90,81,56,55,40]
        },
        {
            fillColor : "rgba(59,97,150,0.5)",
            strokeColor : "rgba(59,97,150,1)",
            pointColor : "rgba(59,97,150,1)",
            pointStrokeColor : "#fff",
            data : [28,48,40,19,96,27,100]
        }
    ]
};
var options = { scaleOverlay : false, scaleOverride : false, scaleLineWidth : 1,  pointDotRadius : 3, pointDotStrokeWidth : 1, animationSteps : 150 };

new Chart(context).Line(data, options);

                    </script>
                    </div>
                    <div class="text1">
                        <div class="innertext">
                        <h3>Praesent viverra</h3>
                        <hr/>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                        </div>
                    </div>




        <div class="graph2">

                    <canvas id="myCanvas2" width="475" height="400">Graph 2</canvas>
                    <script>
                    //Get the context of the canvas element we want to select
                    context = document.getElementById('myCanvas2').getContext('2d');
var Pie = {};
var data = [
    {
        value: 30,
        color:"#973938"
    },
    {
        value : 50,
        color : "#78963E"
    },
    {
        value : 40,
        color : "#3B6196"
    },
    {
        value : 25,
        color: "#F49D20"
    },
    {
        value : 35,
        color: "#FBDD13"
    }           
];
var options = { animationSteps : 150 };

new Chart(context).Pie(data, options);

                    </script>
                    </div>
                    <div class="text2">
                        <div class="innertext">
                        <h3>Praesent viverra</h3>
                        <hr/>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                        </div>
                    </div>


    </body>
</html>

的main.css：

.graph1 {
    margin-left: 15%;
    width: 33%;
    float: left;
    height: 450px;
    display: block;
}

.graph1 canvas {
    padding: 25px 25px 25px 25px;
}

.graph2 {
    margin-right: 15%;
    width: 33%;
    float: right;
    height: 450px;
    display: block;
}

.graph2 canvas {
    padding: 25px 25px 25px 25px;
}


.innertext {
    padding-top: 25%;

}

.text1 {
    margin-right: 15%;
    width: 33%;
    float: right;
    height: 450px;

}

.text1 p {
    text-align: center;
}

.text1 hr {
    margin: 0 auto;
    width: 40%;
    text-align: center;
}

.text1 h3 {
    text-align: center;
    color: #636363;
}


.text2 {
    margin-left: 15%;
    width: 33%;
    float: left;
    height: 450px;

}

.text2 p {
    text-align: center;
}

.text2 hr {
    margin: 0 auto;
    width: 40%;
    text-align: center;
}

.text2 h3 {
    text-align: center;
    color: #636363;
}

.separator1 {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 1000px;
}

再次感谢愿意帮助的人！

Charts.js - ＆gt;仅在屏幕上显示时显示/加载图表

0 个答案: