Canvas 应用 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

绑定数据


在前面准备好,我现在需要创建一组模拟数据,绑定给图表,呈现出显示的结果。

为了实现显示的每次数值都不一样,我们创建一组随机数(randomScalingFactor)赋值给下面lineChartDatadata:

var randomScalingFactor = function(){ return Math.round(Math.random()*100)};

页面加载是绑定数据

window.onload = function(){
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myLine = new Chart(ctx).Line(lineChartData, {  // lineChartData为绑定模拟数据
        responsive: true
    });
}

下面lineChartData为在一组模拟数据,赋值给new Chart(ctx).Line(lineChartData)

    var lineChartData = {
            labels : ["January","February","March","April","May","June","July"],
            datasets : [
                {
                    label: "My First dataset",
                    fillColor : "rgba(220,220,220,0.2)",  // 填充颜色
                    strokeColor : "rgba(220,220,220,1)",  // 线条颜色
                    pointColor : "rgba(220,220,220,1)",   // 点颜色
                    ...
                    data : [randomScalingFactor(),...]  // 随机数赋值
                },
                {
                    label: "My Second dataset",
                    ...,
                    data : [randomScalingFactor(),...]
                }
            ]
    }