HighCharts -Angular ,如何在从x轴绘制的垂直线上获取y轴标签

nsc4cvqm  于 2022-11-11  发布在  Highcharts
关注(0)|答案(1)|浏览(175)

我正在寻找之间的网格线上的y轴标签。https://stackblitz.com/edit/angular-esbyln?file=src%2Fapp%2Fapp.component.ts当前:

预期值:

对折线图使用Angular 图和高线图,对网格线和颜色应用网格线宽和颜色使用以下建议的更改进行更新后-

col17t5w

col17t5w1#

为内部网格线添加标签的一种方法是创建虚拟系列类型散点图。这允许您瞄准图表上的精确点,并仅包括将显示值的该系列的数据标签。

{
    type: 'scatter',
    data: [1, 50, 100, 200],
    color: 'transparent',
    dataLabels: {
      enabled: true
    }
  }

现在,您必须将添加的虚拟散布系列设置为不可见,不响应鼠标移动,也不显示工具提示。

plotOptions: {
  series: {
      colorByPoint: false
  },
  scatter: {
      states:{
          inactive:{
              enabled: false
          }
      },
      dataLabels:{
          enabled: true,
          padding: 1,
          allowOverlap: true,
          crop: false,
          overflow: 'allow',
      },
      enableMouseTracking: false,
      showInLegend: false
  },

如果您对此感到好奇或者上述方法不能满足您的要求,另一种方法是渲染标签。https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label
要选择点的精确坐标,可以使用x,y表示法。

data: [{x:0, y:1 }, {x:1, y:20}, 100, 200],

相关问题