highcharts

Question

我需要创建一个柱形图，其中x轴刻度如下图所示：

1. 每小时一趟
2. 每30小时一个短片。
3. 每15分钟一个较短的刻度

我设法tickLength和minorTickLength有两种不同的长度，你可以从这个小提琴中看到https://jsfiddle.net/depsir/pso8yya7/

有没有办法增加第三个刻度长度？我正在考虑像labels.formatter这样的东西，但是对于刻度长度，但是任何其他选项都将被赞赏

Answer 1

我认为可能的解决方案之一就是改变每一个minorTicks路径，所以它会更长一点。您可以在加载和重绘事件回调函数中更改它。

    var makeCustomTicks = function(chart) {
    var ind, d, newD, additionalLength = 8;
    Highcharts.each(chart.xAxis[0].getMinorTickPositions(), function(p, i) {
      if (i % 2 === 0) {
        d = chart.xAxis[0].minorTicks[p].mark.d;
        ind = d.lastIndexOf(' ');
        length = parseFloat(d.substring(d.lastIndexOf(' '), d.length)) + additionalLength;
        newD = d.substring(0, d.lastIndexOf(' ') + 1) + length;
        chart.xAxis[0].minorTicks[p].mark.attr({
          d: newD
        });
      }
    })
  }

在这里，您可以看到一个示例：https://jsfiddle.net/pso8yya7/2/

您还可以添加具有不同刻度长度和不同tickInterval的新xAxis。

xAxis: [{
  type: "datetime",
  tickInterval: 60 * 60 * 1000,
  minorTickInterval: 15 * 60 * 1000,
  minorTickWidth: 1,
  tickLength: 25,
  minorTickLength: 10,
  labels: {
    y: 30,
  }
}, {
  type: "datetime",
  tickInterval: 30 * 60 * 1000,
  tickLength: 20,
  offset: 0,
  linkedTo: 0,
  labels: {
    enabled: false
  }
}],

在这里你可以看到一个如何工作的例子： https://jsfiddle.net/pso8yya7/3/

最好的问候。