时间戳

首页 > 解决方案 > Highcharts 渲染周期（无数标签格式化程序调用）

javascript - Highcharts 渲染周期（无数标签格式化程序调用）

问题描述

tl;博士包括

我有yAxis.labels.formatter一个

/**
 * Formats yAxis labels in order to include the min/max dates of the row
 *
 * /!\ Scared of performance issues
 * /!\ because the formatter is called 4 times on init,
                                       twice on resize, 
                                       and once on update
 * /!\ On top of that, the formatter is called once per category (label)
 * /!\ and my (poopy) function loops over all the data, each time
 * /!\ as a result, we have
 *          => 4 x nbOfCategories x nbOfData
 *  calls of this function :( --> see console logs
 */

如前所述，在初始渲染时，每个类别调用格式化程序函数 4 次（并且我当前的实现已经每次循环遍历所有数据，这是一个非常糟糕的主意，我知道，但这会改变：参见“真正的问题”）。在前两个期间，调用this.chart.series[0].data仍然是空的，但如果我尝试跳过它（通过评论链接line 79的演示），那么图表会在没有正确标签格式的情况下实例化（即使我的函数仍然被调用两次）。（这已经很奇怪了，不是吗？）

我怀疑 HighCharts 有某种生命周期、顺序，用于绘制/更新导致此问题的图表，但不知道是哪个。

真正的问题

我真正的问题是“我应该如何处理这个（格式化轴标签）/是否有更便宜的方法来手动'强制'标签更新？”

我并不完全在寻找优化的功能（但仍然欢迎这些功能），因为我已经计划在 HighCharts 之外计算这些标签并传递它们，userOptions以便将成本降低4 x nbOfCategories x nbOfData到 just4 x nbOfCategories但理想情况下，我想要一种减少它nbOfCategories的方法（比如更新系列数据时只有一个调用）。

tl;博士：

有没有办法在初始渲染时使用 HighCharts 的“生命周期”减少标签格式化程序调用的数量（目前为 4 个）？

标签： javascripthighcharts

解决方案

我认为将yAxisCategoryMinMaxValueFormatter函数的结果作为 id 附加到数据点并在格式化程序中显示可能是一个更好的解决方案。

for (let i of data1){
    i.id =  "" + i.name + "<br><b>" + toDdMmDateFormat(new Date(i.start)) + " — " + toDdMmDateFormat(new Date(i.end)) + "</b>"
}

和

formatter(){
    let data = this.chart.series[0].userOptions.data;
    return data[this.pos].id
  }

演示：https ://jsfiddle.net/BlackLabel/4h3wqm2u/

推荐阅读