Question

我想在我的页面上绘制图表，并希望使用Charts.js。

上的文档

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

说我想创建的Chars需要一个像这样的标签数组：

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]
        }
    ]
}

问题：如何创建这样的数组？
问题：如何使用文本字段的输入填充此数组？

谢谢！扬

Answer 1

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

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

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

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

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

与为数据分配值类似，创建数组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是您从文本字段中获取的数组。希望这会有所帮助。

Answer 2

定义类似这样的内容{

data = {
        label:""
        fields: [],     
};

推送值

data.fields.push({
        label: "label", 
        value: "your constructed value"
        });

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

2 个答案: