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');
        }
    }
});

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

1 个答案: