billboard.js elease：viewBox 调整大小！

新的 v3.14 版本今天发布了！此版本包含 5 个新功能、8 个错误修复和一系列改进。

详细的发布信息，请查看发行说明：

• https://github.com/naver/billboard.js/releases/tag/3.14.0

什么是新的？

调整视图框大小

添加了新的调整大小选项。默认调整大小将根据容器尺寸的变化进行调整。

新的 resize.auto='viewBox' 选项将使图表调整大小并保持纵横比，并且无需任何计算成本。

基本上，它利用了“viewBox”属性行为，它实际上做的是拉伸 SVG 视口。

演示：https://naver.github.io/billboard.js/demo/#ChartOptions.resizeViewBox

如果使用要求符合，强烈推荐。

axis.evalTextSize

图表初始化渲染时，内部会计算轴刻度文本大小，以计算轴区域所需的空间。

一般情况下，根本不需要考虑这个过程，但是在初始化之后轴刻度文本大小发生变化的情况下，计算将导致渲染不正确，因为内部使用的刻度文本大小无效更改后。

为了改进此用例，将提供新的 axis.evalTextSize 选项，其中可以选择获取轴刻度大小计算的方式。

axis: {
    // 1: default, which will memoize evaluated axis text size
    evalTextSize: true,

    // 2: will evaluate the dimension of axis text size every time.
    evalTextSize: false,

    // 3: customize dimension evaluator
    evalTextSize: function(text) {
        ...
        return {width, height):
   }
}

交互.onout

离开图表区域的“默认”行为是使当前选定的状态散焦。这意味着工具提示、聚焦网格线等的显示状态

新选项将保持上次选择状态，即使远离图表区域，也能保持上次选择状态。

从技术上讲，该选项将打开或关闭“onout”事件的默认交互。

interaction: {
    onout: false
}

强制延迟渲染

render.lazy 选项将在容器元素变得可见时进行渲染。对于稍后需要初始化图表元素的情况很有用。

当容器元素不可见时，将自动设置该确定。并且没有办法强制在这种情况下渲染，因为在隐藏状态上初始化可能会导致渲染错误，并且通常没有任何意义。

但是，也有特殊情况可以这样做。为了满足这些必要性，当显式设置 render.lazy=false 时，无论容器元素可见性状态如何，都将进行初始化。

axis: {
    // 1: default, which will memoize evaluated axis text size
    evalTextSize: true,

    // 2: will evaluate the dimension of axis text size every time.
    evalTextSize: false,

    // 3: customize dimension evaluator
    evalTextSize: function(text) {
        ...
        return {width, height):
   }
}

图例项事件回调的可见性状态

为图例项的事件回调函数添加了小信息增强。

事件回调仅提供当前图例 id 值。如果需要根据图例可见性执行一些任务，则需要您自己实现。

这并不难，但绝对是麻烦的事情。为了摆脱这个问题，现在将传递图例项的“可见”状态。

基于这个参数，可以根据可见性状态执行任务。

interaction: {
    onout: false
}

闭幕式

这就是我们此版本的全部内容，也可能是今年最后的功能实现。

始终感谢，敬请关注即将推出的更新！

以上是billboard.js elease：viewBox 调整大小！的详细内容。更多信息请关注PHP中文网其他相关文章！