Chart.js 在折线图上绘制两个 json 数据集答案

【问题标题】：Chart.js plotting two json datasets on a line chartChart.js 在折线图上绘制两个 json 数据集
【发布时间】：2015-08-08 03:08:24
【问题描述】：

我正在尝试研究如何使用 Chart.js 将标签绘制到正确的位置

var json = {
    "competition one": [
        {
            "date": "2015-05-20",
            "position": 37
        },
        {
            "date": "2015-05-21",
            "position": 22
        }
    ],
    "competition two": [
        {
            "date": "2015-05-20",
            "position": 29
        },
        {
        "date": "2015-05-21",
        "position": 19
        }
    ]
}

如何将标签绘制到正确的位置？将日期转到正确的标签上，这样就不会重复了？

具体来说，我正在努力将"competition one" 放入dataset 数组的label (label: "competition one")

我需要它类似于 Chart.js 所需的以下数据结构吗？

var data = {
    labels: ["2015-05-20", "2015-05-21"],
    datasets: [
        {
            label: "competition one",
            data: [37, 22]
        },
        {
            label: "Competition two",
            data: [29, 19]
        }
    ]
};

【问题讨论】：

我自己试过了，我不知道如何在正确的地方获取标签
我会改写我的问题
感谢您帮助改写它
我建议您的 JSON 错误。你能控制它是如何产生的吗？如果您可以更改 json 结构，使 "competition one" 等成为值而不是变量，这将使您的生活变得更加轻松，例如 json = [{label:"competition one", data:[{...}, {..}]}, ..]
不，我不知道，这就是它从数据库中输出的方式。

标签： javascript jquery json chart.js

【解决方案1】：

如 cmets 中所述，您可以像这样获得属性名称：

var json = {
    "competition one": [
        {
            "date": "2015-05-20",
            "position": 37
        },
        {
            "date": "2015-05-21",
            "position": 22
        }
    ],
    "competition two": [
        {
            "date": "2015-05-20",
            "position": 29
        },
        {
        "date": "2015-05-21",
        "position": 19
        }
    ]
}

var keys = Object.keys(json);
for (var i = 0; i < keys.length; i++)
{
    var key = keys[i];
    //"competition one", "competition two", etc
    console.log(key);   
}

Fiddle

然后您只需将这些值操作到您想要的对象结构中。

var keys = Object.keys(json);
//set up our object containing an array called datasets
var data = {datasets:[]};
for (var i = 0; i < keys.length; i++)
{
    var key = keys[i];
    //push the key into the dataset array as an object {}
    data.datasets.push({label:key, data:...});   
}

【讨论】：

谢谢，这是解决我的问题的一个很好的开始。