Question

我需要用高图表显示心电图结果，这基本上是一个简单的线/样条图，但稍微调整一下。心电图纸如下所示：https://cdn.printablepaper.net/samples/ECG_Paper.png

这也是我想用hightcharts实现的目标。一个小方块意味着0.1 mV和0.04 s，因此一个大方块是0.5 mV和0.2 s。我知道有一个tickInterval设置，但这在这种情况下不起作用，我认为间隔太小了，因为它会随机隐藏网格线。

最佳解决方案是，如果需要隐藏网格线（数据太宽），它只会隐藏小方块。为了避免将用户与此混淆，我们还想以不同方式着色网格线，因此每隔五行应为红色，其他为灰色。

这是否可以使用highcharts？

Answer 1

minorTicks功能似乎是这种情况的理想选择。将此选项与minorTickInterval一起使用。两个轴的配置如下所示：

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

现场演示： http://jsfiddle.net/kkulig/6dbnmyxf/

如果在任何轴上看不到小刻度，则此代码将在所有轴上隐藏它们（并在需要时恢复它们）：

  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

设置ECG纸状网格间隔（highcharts.js）

1 个答案: