$(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);
假设数组被正确解析,这应该可以很好地渲染图表。
关于javascript - 如何制作从对象动态加载的图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27770756/