如何制作从对象动态加载的图形

How to make a graph that dynamically loads from a object

本文关键字：加载 图形 动态 对象 何制作      更新时间：2023-09-26
$(document).ready(function () {
        var canvas = document.getElementById('canvas'),
            context = canvas.getContext('2d');
        function deseneazaGrafic(valori) {
            var h = canvas.height;
            var w = canvas.width / valori.length;
            context.fillStyle = "#DEDEDE";
            context.fillRect(0, 0, canvas.width, canvas.height);
            context.fillStyle = "red";
            context.strokeStyle = "black    ";
            context.lineWidth = 2;

            var f = canvas.height * 0.9 / Math.max.apply(Math, valori);
            for (var i = 0; i < valori.length; i++) {
                context.beginPath();
                context.rect((i + 0.1) * w, h - valori[i] * f, 0.8 * w, valori[i] * f);
                context.fill();
                context.stroke();
            }
        }

        $("#btnGrafic").click(function () {
            deseneazaGrafic(eval("[" + $("#valori").val() + "]"));
        });


        $("#scrie").click(function(){

        });
});

这是我的java脚本。这会从一些写入的值中生成图形。如何将"valori"更改为jsonObject.values？多谢

作为正式答案（有关详细信息，请参阅问题注释），函数deseneazaGrafic接受一个简单的javascript数组。 现在它正在eval（呃...错误）文本区域的值（#valori）。 您可以使用任何 JavaScript 数组。 从 JSON 文件中获取值时，只需将其作为参数传递给deseneazaGrafic即可。例如：

var jsonObject = JSON.parse(myJSONString);  // the JSON object contains an array called "values"
deseneazaGrafic(jsonObject.values);

假设数组被正确解析，这应该可以很好地呈现图形。

相关文章：