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

Question

我前段时间发布了一个与此类似的问题，@SebastianBochan 帮助了我，我认为这应该是一个新主题。 This is the question I posted. Given this fiddle 我用@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 轴下方作为标签，如果此选项存在的话。每次我刷新图表时，这些值都会上下跳动，改变它们的位置。我怎样才能做到这一点？我哪里错了？

另一方面，我想为这些标签添加一些样式。在同一个 fiddle 中，我添加了以下 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/

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

How to set Highcharts data series in x-axis using crosshairs?

javascript

css

charts

highcharts

highstock