javascript - 创建一个多维数组并填充它

Question

我想在我的页面上绘制图表，并且想使用 Charts.js。上的文档

http://www.chartjs.org/docs/

说我要创建的字符需要这样的标签数组:

var data = {

    labels : ["January","February","March","April","May","June","July"],
    datasets : [
        {
            fillColor : "rgba(220,220,220,0.5)",
            strokeColor : "rgba(220,220,220,1)",
            pointColor : "rgba(220,220,220,1)",
            pointStrokeColor : "#fff",
            data : [65,59,90,81,56,55,40]
        },
        {
            fillColor : "rgba(151,187,205,0.5)",
            strokeColor : "rgba(151,187,205,1)",
            pointColor : "rgba(151,187,205,1)",
            pointStrokeColor : "#fff",
            data : [28,48,40,19,96,27,100]
        }
    ]
}

1. 问题:如何创建这样的数组？

2. 问题:如何用文本域的输入填充这个数组？

谢谢! 简

Answer 1

A1) 你所写的方式是在 javascript 中创建数组的正确方式

A2) 假设您有一个带有 id='month' 的文本字段。您可以像这样访问它的值:

var month = document.getElementById('month').value

接下来您可以创建一个数组 var label = []; 并通过插入数组来添加文本字段中的数据。即 label.push(month)

为 label 填充数组后，您可以将此数组分配给 data 对象的属性 labels。

类似地给数据赋值，创建一个数组var values = []; var values2 = []; 现在通过将值插入数组来填充 values 和 values2 数组。

var label = [];
var values = []; 
var values2 = [];
var month = document.getElementById('month').value;  
//keep on doing this for all input fields
label.push(month)
//similarly push data into values and values2.
//Now build your structure for chart as follows:
var data = {

    labels : label,
    datasets : [
        {
            fillColor : "rgba(220,220,220,0.5)",
            strokeColor : "rgba(220,220,220,1)",
            pointColor : "rgba(220,220,220,1)",
            pointStrokeColor : "#fff",
            data : values
        },
        {
            fillColor : "rgba(151,187,205,0.5)",
            strokeColor : "rgba(151,187,205,1)",
            pointColor : "rgba(151,187,205,1)",
            pointStrokeColor : "#fff",
            data : values2
        }
    ]
}

此处 label 、values 和 values2 是您从文本字段中获得的数组。 希望这会有所帮助。