我想使用一个对象来帮助使用 Chartjs 创建图表

时间:2021-03-03 22:41:42

标签: javascript object chart.js object-literal

class HeartGraph {
    constructor(label, data, backgroundColor, borderColor, fill) {
        this.label = label;
        this.data = data;
        this.backgroundColor = backgroundColor;
        this.borderColor = borderColor;
        this.fill = fill;
    }
    
    getGraph() {
        var graph = {
            "label" : this.label,
            "data" : this.data,
            "backgroundColor" : this.backgroundColor,
            "borderColor" : this.borderColor,
            "fill" : this.fill
        };
        return graph;
    }
}

var systolic_graph = new HeartGraph(
    'Systolic', 
    <?php echo(json_encode($systolic)); ?>,
    "rgba(60, 111, 194, 1)",
    "rgba(60, 111, 194, 1)",
    false
);

// 打印返回对象到控制台的结果

console.log(systolic_graph.getGraph());

// 从 Chart() 调用的数据集参数中,而不是这个:

{
    label: 'Diastolic',
    data: <?php echo(json_encode($diastolic)); ?>,
    backgroundColor: "rgba(76, 245, 112, 1)",
    borderColor: "rgba(76, 245, 112, 1)",
    fill: false
}

// 我只想简单使用:

{
    systolic_graph.getGraph()
}

为什么这行不通? Chrome 中的控制台告诉我“Uncaught SyntaxError: Unexpected token '.'”以及它引用的行指向 --> systolic_graph.getGraph()

有什么想法吗?

1 个答案:

答案 0 :(得分:0)

我刚刚想通了! Chartjs 需要对象字面量(即 { ..... }),但我在 { } 容器内返回了一个对象字面量及其花括号。所以,它最终看起来像这样:

{
    {
    label: 'Diastolic',
    data: <?php echo(json_encode($diastolic)); ?>,
    backgroundColor: "rgba(76, 245, 112, 1)",
    borderColor: "rgba(76, 245, 112, 1)",
    fill: false
    }
}

那些外花括号不能存在。我想我理解正确。 :)