chartist.js - 如何在 chartist.js 中使用时间戳数据？

Question

我有一个数据集，其中 x 值是时间戳。

时间戳是不规则的 - 所以一个是 2016-12-13T00:01:02Z，另一个是 2016-12-13T02:13:05Z。

我想将此数据绘制成显示一整天的折线图，这意味着 X 轴将显示 00 01 02 ... 22 23 24。

我将如何在 chartist.js 中做到这一点？

Answer 1

我自己想通了。

我使用两个数据集。一个包含我的数据。另一个（baseData）将包含两个时间戳：一天的开始和一天的结束。这将强制图表使用 00 01 02 ... 21 22 绘制 X 轴。

我不想在图表中显示“baseData” - 所以我通过 css 隐藏它：

.ct-series-a .ct-line {
                /* Set the color for seriesDataTemperatures */
                stroke: green;
                /* Control the thickness of seriesDataTemperatures */
                stroke-width: 1px;
}
.ct-series-b .ct-line {
                /* Set the color for baseData */
                stroke: grey;
                /* Control the thickness of baseData */
                stroke-width: 0px;
}

然后我像这样画我的图表：

// My time-stamped series go here
var seriesDataTemperatures = [];

// This data-set will have two values, begin of day and end of day.
// E.g. [{ x: new Date("2016-12-16T00:01:00.000Z").valueOf(), y: 0 }, { x: new Date("2016-12-16T23:59:00.000Z").valueOf(), y: 0}]
var baseData = [];

chartTemperatures = new Chartist.Line('.ct-chart-temperatures', {
    series: [
                {
                    name: 'temperatures',
                    data: seriesDataTemperatures 
                },
                {
                    name: 'base',
                    data: baseData
                }
                ]
}, {
    showPoint: false,
    lineSmooth: false,
    axisX: {
        type: Chartist.FixedScaleAxis,
        divisor: 23,
        labelInterpolationFnc: function (value) {
            return moment(value).format('HH');
        }
    }
});