Javascript 折线图：对齐多个数据集的x轴（时间戳）

我的头撞到了砖墙上。我有一个数据集，随时间跟踪三个数据点。这些数据点可以相互独立地更改。我试图在折线图中显示这些变化的历史，但我还没有找到如何为这三个轴创建一个公共x轴

返回的数据如下所示：

{
    "Default": {
        "Values": [
            999,
            799,
            999
        ],
        "Timestamps": [
            "2015-03-01T03:31:16+00:00",
            "2015-03-01T07:21:43+00:00",
            "2015-03-01T14:02:22+00:00"
        ]
    },
    "Current": {
        "Values": [
            399,
            849
        ],
        "Timestamps": [
            "2015-03-01T01:15:22+00:00",
            "2015-03-01T21:30:43+00:00"
        ]
    },
    "CurrentPremium": {
        "Values": [
            500,
            345,
            200,
            500
        ],
        "Timestamps": [
            "2015-02-01T14:24:00+00:00",
            "2015-03-01T00:13:28+00:00",
            "2015-03-01T09:56:43+00:00",
            "2015-03-01T12:00:04+00:00"
        ]
    }
}

返回的值指示此值何时从以前的值更改

---

我正在使用chartjs中的折线图来可视化数据。为此，我需要提供一个与线条数据点匹配的通用标签列表，因此我需要以某种方式对齐这三个数据集，但我不知道如何实现这一点。

我会使用lodash之类的库（使实用程序更快）将数据预处理为所有时间戳的平面列表，然后对于每个数据集，如果该数据集没有来自所有时间戳的合并平面列表的时间戳，则为记录null的匹配值列表

我还向我的fork of chart js添加了一个选项，这在这里很有用，它将填充稀疏数据到仍然连接的线，并且您不会留下难以看到的浮点

var数据集={
“默认值”：{
“价值观”：[
999,
799,
999
],
“时间戳”：[
“2015-03-01T03:31:16+00:00”，
“2015-03-01T07:21:43+00:00”，
“2015-03-01T14:02:22+00:00”
]
},
“当前”：{
“价值观”：[
399,
849
],
“时间戳”：[
“2015-03-01T01:15:22+00:00”，
“2015-03-01T21:30:43+00:00”
]
},
“当前溢价”：{
“价值观”：[
500,
345,
200,
500
],
“时间戳”：[
“2015-02-01T14:24:00+00:00”，
“2015-03-01T00:13:28+00:00”，
“2015-03-01T09:56:43+00:00”，
“2015-03-01T12:00:04+00:00”
]
}
};
//将所有时间戳合并并排序到一个数组中（此处使用lodash只是为了简化操作）
var timestamps=u.chain（数据集）.puck（“timestamps”）.reduce（函数（上一个、当前、索引）{
返回上一个.concat（当前）
}).unique（）.sortBy（函数（时间戳）{
返回新日期（时间戳）
}).value（）；
//使用颜色设置基础图表数据
var图表数据集=[{
填充颜色：“rgba（220120120,0.2）”，
strokeColor:“rgba（220120120,1）”，
点颜色：“rgba（1201,1）”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（2201）”，
}, {
fillColor:“rgba（20120,0.2）”，
strokeColor：“rgba（20120,1）”，
pointColor:“rgba（20120,1）”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（2201）”，
}, {
填充颜色：“rgba（120120,0.2）”，
strokeColor:“rgba（1201,1）”，
点颜色：“rgba（1201,1）”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（2201）”，
}]
//从服务器浏览每个数据集，
//对于每个数据集，检查其时间戳，
//检查合并的时间戳，如果时间戳在数据集中重新出现，则记录值other wise record null，因此
//最终得到一个与固定时间戳匹配的固定数据列表
var数据集指数=0；
_.forEach（数据集、函数（数据集、键）{
var数据=[]；
_.forEach（时间戳，函数（时间戳）{
var dataToPush=null；
_.forEach（dataset.Timestamp，函数（datasetTimestamp，datasetTimestampIndex）{
if（datasetTimestamp===时间戳）{
dataToPush=dataset.Values[datasetTimestampIndex]；
}
});
数据推送（dataToPush）；
});
chartDatasets[datasetsIndex].label=key；
chartDatasets[datasetsIndex]。数据=数据；
datasetsIndex++；
});
var图表数据={
标签：时间戳，
数据集：图表数据集
};
var chart=新图表（document.getElementById（“图表”）.getContext（“2d”））.Line（chartData{
populateSparseData:true
})；

---

下面的答案是您想要的吗？