如何使用十字准线在 x 轴上设置高图表数据系列

Question

我前段时间发布了一个与此类似的问题，@SebastianBochan帮助了我，我认为这应该是一个新话题。这是我发布的问题。鉴于我用前面的代码@SebastianBochan生成的这个小提琴，我想在 x 轴上将 x 轴值显示为标签，准确地说，就像数据系列出现在带有相应十字准线的 y 轴上一样，我想对 x 轴做同样的事情。这是我到目前为止的代码：

if (chart.crossLabel2) {
    // update label
    chart.crossLabel2.attr({
        x: x - 13,
        text: chart.xAxis[0].toValue(x).toFixed(2)
    }).show();
} else {
    // draw label
    chart.crossLabel2 = chart.renderer.text(chart.xAxis[0].toValue(x).toFixed(2), chart.plotBottom, y).add();
}

但是，使用此代码，值确实会出现，但遗憾的是，当指针从左向右移动时，这些值相对于鼠标位置从左向右移动值并不处于固定位置。在这种情况下，这些值应该在图表的底部（chart.plotBottom），在x轴下方作为标签，如果此选项甚至存在的话。每次我刷新图表时，这些值都会不断上下跳跃，改变它们的位置。我怎样才能做到这一点？我哪里做错了？

另一方面，我想为这些标签添加一些样式。在同一个小提琴中，我添加了以下 css 代码：

#highcharts-0 > svg > text:nth-child(5) {
    outline: 1px solid gray;
    background-color: #4C4C4C;
    color: #FCFCFC;
    outline-offset: 3px;
    zIndex: 10;
}

这应该做的是，将文本颜色更改为白色，将背景颜色更改为黑色或几乎黑色，但没有任何反应。然而，这段代码生成轮廓（outline-offset: 3px;）在文本周围创建一个框。颜色呢？我尝试使用：

background-color: #4C4C4C !important;
color: #FCFCFC !important;

尽管如此，什么也没发生。我创建了一个新的div（<div id="demo">Value</div>），并添加了以下css，仅用于测试目的：

#demo {
    color: #FCFCFC;
    background-color: #4C4C4C;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 3px;
    padding-right: 3px;
}

这有效，我想在标签中添加与此div 相同的样式。我该怎么做？

此致敬意！！

Answer 1

通常，文本元素不能有背景。为此，您应该使用渲染器并添加额外的形状（矩形）。样式也应该应用于 css（） attr（） 函数，而不是 CSS 中的引用（如 #highcharts-0> svg> text：nth-child（5） ）。

    function move(event) {
    var x = event.pageX,
      y = event.pageY,
      labelPadding = [5, 5, 5, 5],
      minX = chart.plotLeft,
      maxX = minX + chart.plotWidth,
      minY = chart.plotTop,
      maxY = minY + chart.plotHeight,
      path = ['M', chart.plotLeft, y,
        'L', chart.plotLeft + chart.plotWidth, y,
        'M', x, chart.plotTop,
        'L', x, chart.plotTop + chart.plotHeight
      ],
      bbox, bbox2;
    if (chart.crossLines && chart.crossLabel1 && chart.crossLabel2 && (x < minX || x > maxX || y > maxY || y < minY)) {
      chart.crossLines.hide();
      chart.crossLabel1.hide();
      chart.crossLabel2.hide();
      chart.crossLabel1bck.hide();
      chart.crossLabel2bck.hide();
    } else {
      if (chart.crossLines) {
        // update lines
        chart.crossLines.attr({
          d: path
        }).show();
      } else {
        // draw lines
        chart.crossLines = chart.renderer.path(path).attr({
          'stroke-width': 0.5,
          stroke: 'black',
          dashstyle: 'Dash',
          zIndex: 10
        }).add();
      }
      if (chart.crossLabel1) {
        // update label
        chart.crossLabel1.attr({
          zIndex: 10,
          y: y + 5,
          text: chart.yAxis[0].toValue(y).toFixed(2)
        }).show();
        bbox = chart.crossLabel1.getBBox();
        //background
        chart.crossLabel1bck.attr({
            x: bbox.x - labelPadding[3],
            y: bbox.y - labelPadding[0],
            width: bbox.width + labelPadding[1] + labelPadding[3],
            height: bbox.height + labelPadding[0] + labelPadding[2]
          })
          .show();
      } else {
        // draw label
        chart.crossLabel1 = chart.renderer.text(chart.yAxis[0].toValue(y).toFixed(2), chart.plotLeft - 56, y + 5).css({
          color: 'white'
        }).add();
        bbox = chart.crossLabel1.getBBox();
        //background
        chart.crossLabel1bck = chart.renderer.rect(bbox.x - labelPadding[3], y + 5 - labelPadding[0], bbox.width + labelPadding[1], bbox.height + labelPadding[2]).attr({
            fill: 'black',
            'stroke': 'black',
            'stroke-width': 1,
            zIndex: 9
          })
          .add();
      }
      if (chart.crossLabel2) {
        // update label
        chart.crossLabel2.attr({
          zIndex: 10,
          x: x - 13,
          text: chart.xAxis[0].toValue(x).toFixed(2)
        }).show();
        bbox2 = chart.crossLabel2.getBBox();
        //background
        chart.crossLabel2bck.attr({
          x: bbox2.x - labelPadding[3],
          y: bbox2.y - labelPadding[0],
          width: bbox2.width + labelPadding[1] + labelPadding[3],
          height: bbox2.height + labelPadding[0] + labelPadding[2]
        }).show();
      } else {
        // draw label
        chart.crossLabel2 = chart.renderer.text(chart.xAxis[0].toValue(x).toFixed(2), chart.plotBottom, chart.plotTop + chart.plotHeight + 12 + labelPadding[0]).css({
          color: 'white'
        }).add();
        bbox2 = chart.crossLabel2.getBBox();
        //background
        chart.crossLabel2bck = chart.renderer.rect(bbox.x - labelPadding[3], chart.plotTop + chart.plotHeight - labelPadding[0], bbox.width + labelPadding[1], bbox.height + labelPadding[2]).attr({
            fill: 'black',
            'stroke': 'black',
            'stroke-width': 1,
            zIndex: 9
          })
          .add();
      }
    }
  }

示例：https://jsfiddle.net/djf7fe04/