billboard.js のリリース: viewBox のサイズ変更!

新しい v3.14 リリースが本日リリースされました。このリリースには、5 つの新機能、8 つのバグ修正、および多数の改善が含まれています。

詳しいリリース情報については、リリース ノートをご覧ください:

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

新着情報？

ビューボックスのサイズ変更

新しいサイズ変更オプションが追加されました。デフォルトのサイズ変更は、コンテナの寸法の変更に基づいてサイズ変更されます。

新しいsize.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」イベントのデフォルトのインタラクションをオンまたはオフにします。

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 のリリース: viewBox のサイズ変更!の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。