[FlexChart] majorGridとminorGridを表示したとき、majorUnitの値が軸の表示範囲より小さいと軸の副グリッド線が表示されない – MESCIUS ナレッジベース

作成日: 2023/03/31 最終更新日: 2023/10/04

文書種別

不具合

状況

修正済み

詳細

majorGridプロパティとminorGridプロパティをtrueに設定します。この時、majorUnitの値が軸の表示範囲より小さい（= maxプロパティ- minプロパティの値がmajorUniの値より小さい）場合、軸の副グリッド線が表示されません。

回避方法

この問題はバージョン5.20231.904で修正されました。

修正版を適用しない場合の回避方法は次の通りです。

renderedイベントを使用して軸の副グリッド線を描画する方法がございます。

lineChart.rendered.addHandler((sender, args) => {
  if (lineChart.axisX.minorGrid) {
    args.engine.stroke = '#666';
    args.engine.strokeWidth = 1;

    let points = document.querySelector('.wj-series-group polyline').points,
      rect = document.querySelector('.wj-plot-area rect'),
      y1 = rect.y.animVal.value,
      y2 = y1 + parseFloat(rect.attributes['height'].value);

    let minorUnit = sender.axisX.minorUnit;
    if (minorUnit === undefined) minorUnit = 1;
    // 各ポイントに線を引きます。
    for (let index = minorUnit - 1; index < points.length; index += minorUnit) {
      let x = points[index].x;
      if (x >= rect.x.animVal.value)
        args.engine.drawLine(x, y1, x, y2, 'wj-gridline-minor');
    }
  }
});