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

Question

我正在尝试生成 highchart 线性仪表图。根据我检查过的文档，我能够创建以下 fiddle： http://jsfiddle.net/7ch69o1p/

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

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

你能建议我必须更新的属性吗

我想更新应该在这里：

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

Answer 1

我准备了一个演示，展示了如何使用渲染事件中的 SVGRenderer 功能渲染自定义文本，该事件在每次 window 调整大小时触发以保持响应。请注意，我已将 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

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

Highchart - change the minor spacing for linear guage chart

highcharts

axis-labels