Highchart-更改线性仪表图的次要间距

Question

我很想生成一个高图线性度量图。根据我检查过的文档，我可以创建以下小提琴：http://jsfiddle.net/7ch69o1p/

但是我无法完成两件事：在顶部添加低，中，高并在底部绘制更长的刻度线。

我正在寻找预期的结果是这样的：

您能否建议我必须更新的属性

我认为更新将在这里进行：

 gridLineWidth: 1,
 minorTickInterval: 8.33,
 minorTickWidth: 1,
 minorTickLength: 5,
 minorGridLineWidth: 1,

Answer 1

我准备了一个演示，演示了如何使用render事件中的SVGRenderer功能来渲染自定义文本，该事件在每个窗口调整大小以使其保持响应之后触发。注意，我已经将id添加到了应该呈现文本的区域中，之后我对它们进行了循环。我还添加了使它们居中的逻辑。

演示：http://jsfiddle.net/BlackLabel/d3nf2yo7/

events: {
    render() {
      let chart = this,
        yAxis = chart.yAxis[0];

      //check if text exist after resize
      if (customText.length) {
        customText.forEach(text => {
          text.destroy();
        })
        customText.length = 0;
      }

      //create a text for each plotBand with id
      yAxis.plotLinesAndBands.forEach(pl => {
        if (pl.id) {
          let d = pl.svgElem.d,
            textX = d.split(' '),
            textY = d.split(' ')[2] - 5,  //where 5 is a ppadding;  
            text;               

          text = chart.renderer.text(pl.id, textX[1], textY).add();
          //set medium and high on the middle
          if (pl.id === "Medium" || pl.id === "High") {
            text.translate((textX[6] - textX[1]) / 2 - text.getBBox().width / 2, 0)

          }

          // set last value
          if (pl.id === "Significant") {
            text.translate(-text.getBBox().width + (textX[6] - textX[1]), 0)
          }
          customText.push(text);
        }
      })
    }
  }

API：https://api.highcharts.com/highcharts/chart.events.render

API：https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text