如何使用十字线在X轴上设置Highcharts数据系列？

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();
}

但是，使用此代码会出现值DO，但遗憾的是，当指针从左向右移动时，这些值不在相对于鼠标位置的固定位置中从左向右移动值。 在这种情况下，即使此选项存在，这些值也应位于图表的底部（ 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/