ECGの紙のようなグリッド間隔を設定する（highcharts.js）

Question

基本的に単純な線/スプライン線図ですが少し微調整してハイチャートを表示する必要があります。 ECGの論文は次のようになります：https://cdn.printablepaper.net/samples/ECG_Paper.png

これは私がhightchartでも達成したいことです。 1つの小さな正方形は0.1 mVと0.04 sを意味するので、1つの大きな正方形は0.5 mVと0.2 sです。私はtickInterval設定があることを知っていますが、このシナリオではうまくいきません。グリッド線をランダムに隠すため、間隔が小さすぎると思います。

最適な解決策は、グリッド線を非表示にする必要がある場合（広すぎるデータ）、小さな正方形だけを非表示にすることです。ユーザーにこれを混同しないようにするために、グリッド線の色を別々に色付けしたいので、5行おきには赤、他の灰色にする必要があります。

これはハイチャートで可能ですか？

Answer 1

minorTicksこのケースでは理想的なようです。このオプションはminorTickIntervalと一緒に使用してください。小目盛りは、このコードは、すべての軸の上にそれらを非表示になります任意の軸上に表示されていない場合はhttp://jsfiddle.net/kkulig/6dbnmyxf/

（および必要なときにそれらを復元）：

var axesOptions = { 
    tickInterval: 0.5, 
    minorTicks: true, 
    minorTickInterval: 0.1, 
    gridLineWidth: 1, 
    gridLineColor: 'red' 
}; 

ライブデモ：両方の軸のための構成は次のようになります。 ：

chart: { 
    events: { 
     render: function() { 

     var axes = this.axes, 
      showMinorTicks = true; 

     // find if minor ticks are present on both axes 
     axes.forEach(function(a) { 
      console.log(a.minorTicks); 

      if (Object.keys(a.minorTicks).length === 0) { 
      showMinorTicks = false; 
      } 
     }); 

     // hide/show ticks 
     axes.forEach(function(a) { 
      for (var key in a.minorTicks) { 
      var mt = a.minorTicks[key].gridLine; 
      showMinorTicks ? mt.show() : mt.hide(); 
      } 
     }); 
     } 
    } 
    }, 

---

APIリファレンス：

https://api.highcharts.com/highcharts/xAxis.minorTickInterval https://api.highcharts.com/highcharts/xAxis.minorTicks