如何使用 Highcharts 在图表顶部显示十字准线标签

Question

如何将十字线标签渲染到 HighStock 图表的顶部？

现在十字准线标签呈现在 xAxis 上，它应该位于图表底部。

有没有办法在不改变 xAxis 位置的情况下将标签的位置更改为图表的顶部？最后十字准线和标签应该看起来像一个旗帜而不是一个反转的旗帜。

const chart = Highcharts.StockChart({
chart: {
    renderTo: "chart",
},

credits: { enabled: false },
navigator: { enabled: false },
scrollbar: { enabled: false },
tooltip: { enabled: false },
rangeSelector: { inputEnabled: false },

series: [{
    type: "area",
    data: dataSet
  }
],

xAxis: {
    gridLineWidth: 1,
    crosshair: {
        color: lineColor,
        label: { enabled: true, align: "right" }
    }
}
});

Answer 1

十字准线标签与特定轴耦合。但是，您可以创建两个链接的 x 轴。顶轴应该是不可见的，但应该与十字准线和标签相结合。

xAxis: [{
  opposite: true,
  crosshair: {
    label: {
      enabled: true,
      align: "right"
    }
  },
  visible: false
}, {
  linkedTo: 0,
  gridLineWidth: 1
}],

示例：http://jsfiddle.net/p8fqq35v/

如何使用 Highcharts 在图表顶部显示十字准线标签

How can I display crosshair labels on top of the chart with Highcharts

javascript

charts

highcharts

highstock