Question

我有几个不同的高级图表，所有这些高图表都可以根据它们开始和停止的日期时间而变化，因此硬编码的解决方案将无效。

我想要实现的目标是让xAxis标签从第一个数据点的日期时间开始，并在最后一个点的日期时间结束。

我可以做的高保真是这样的事情

xAxis: {
        startOnTick: true,
        endOnTick: true,
        showFirstLabel: true,
        showLastLabel: true
}

这仅仅意味着xAxis本身在 a 标记处开始和结束，不一定是数据的第一个和最后一个标记。它还在图表的左侧和右侧显示一个大的填充/空格，以确保xAxis可以启动并以勾号结束，但正如我所说，这些规则不考虑系列内容，只需启动和结束图表自己计算的任何滴答间隔。

理想情况，包含“1月2017”至“2017年2月20日”数据的图表应标有1月1日的标签。最后以20日元结束。

相反，图表可能会以5月1日开始。并于15日结束。我认为它可以容纳标签的垂直空间。

我怀疑是否有可能获取数据长度，并计算出完美的步数，以便显示第一个和最后一个日期？

Answer 1

在morganfree的帮助下，我想出了如何计算一组刻度位置，这些位置为您提供图表中数据的第一个和最后一个刻度。

在我的解决方案中，我使用了moment.js来获得毫秒级值，因为我很方便。

        tickPositioner: function () {
            const tiPo = [];
            const range = this.dataMax - this.dataMin;
            const steps = Math.floor(this.width / 40) //40 is the the pixel distance you want bewtween ticks
            const mpi = range / steps //milisec per interval
            for (var i = 0; i < steps; i++) {
                tiPo.push(moment(this.dataMin + (mpi * i)).startOf("day").valueOf())
            }
            tiPo.push(this.dataMax)
            tiPo.info = this.tickPositions.info
            return tiPo
        },
        endOnTick: false,

我还发现将enOnTick设置为false有助于让图表自动设置右侧的距离，因此最后一个标签不会溢出或太靠近边缘图表（如果图表周围有边框或其他东西）

如何在第一个和最后一个勾选

1 个答案: