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

【问题标题】：Highchart - change the minor spacing for linear guage chartHighchart - 更改线性仪表图的次要间距
【发布时间】：2020-04-14 00:28:05
【问题描述】：

我正在尝试生成一个 highchart 线性度量图表。根据我检查的文档，我能够创建以下小提琴： http://jsfiddle.net/7ch69o1p/

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

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

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

我认为更新应该在这里进行：

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

【问题讨论】：

标签： highcharts axis-labels

【解决方案1】：

我准备了一个演示，它展示了如何使用渲染事件中的 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

【讨论】：

我们能否将低高和重要部分的宽度显示为相同，尽管它们具有可变的百分比，例如低是 1mm=1%，但对于中是 1mm = 2%，所以它们的宽度相同
说 1 毫米是什么意思？您想要一个具有固定宽度和值的图表还是响应式图表？
我想要一个固定宽度的图表和上面绘制的参数，我绘制参数没有问题，但问题是保持低、中、高和显着的宽度相同。跨度>