时间戳

首页 > 解决方案 > Highchart - 更改线性量规图表的次要间距

highcharts - Highchart - 更改线性量规图表的次要间距

问题描述

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

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

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

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

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

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

标签： highchartsaxis-labels

解决方案

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

推荐阅读