Question

前一段时间我发布了一个类似的问题，其中@SebastianBochan帮助了我，我认为这应该是一个新主题。 This是我发布的问题。鉴于我使用@SebastianBochan之前的代码生成的fiddle，我想在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

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

{{1}}

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

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

1 个答案: