javascript - 如何制作从对象动态加载的图表

Question

$(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？非常感谢

Answer 1

作为正式答案(有关详细信息，请参阅问题评论)，函数 deseneazaGrafic 接受一个简单的 JavaScript 数组。现在它正在eval(呃……不好)文本区域(#valori)的值。您可以使用任何 JavaScript 数组。当您从 JSON 文件获取值时，只需将其作为参数传递给 deseneazaGrafic 即可。例如:

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

deseneazaGrafic(jsonObject.values);

假设数组被正确解析，这应该可以很好地渲染图表。