ChartJS 对齐线注记标签和标签注记

kxkpmulp 于 2023-01-05 发布在 Chart.js

关注(0)|答案(1)|浏览(185)

我使用chartjs-plugin-annotation 2.1.1版在图表上绘制一条线和几个标签。
使用position: 'end'时，标签右对齐。

const l1 = {
      type: 'line',
      label: {
        display: true,
        content: 'line',
        position: 'end',

      },
      scaleID: 'y',
      value: 62,
    };

但是，我无法绘制与线标签垂直对齐（向右）的标签注解。
我已经试过好几次了

const l2 = {
      type: 'label',
      yValue: 0,
      position: 'end',
   // position { x: 'end' },
      content: 'label'     
}

我错过什么了吗？

chart.js

来源：https://stackoverflow.com/questions/74977667/align-line-annotation-label-and-label-annotation

1条答案

按热度按时间

gz5pxeao1#

与xValue和yValue选项定义的点相比，标签的位置可用于定义标签必须位于的位置。
也许最好的方法是使用行注解，除了值之外，使用相同的配置。

const l2 = {
  type: 'line',
  label: {
    display: true,
    content: 'line',
    position: 'end',
  },
  borderWidth: 0, // no line
  scaleID: 'y',
  value: 0
};

或者在标签注解中，可以按如下方式设置xValue和xAdjust：

const l2 = {
  type: 'label',
  yValue: 0,
  xValue: (context) => context.chart.scales.x.max,
  position: 'end',
  content: 'label',
  color: 'white',
  xAdjust: (context) => -context.chart.options.plugins.annotation.annotations.l1.label.padding,
  backgroundColor: 'black'
}

赞(0）回复(0）举报 2023-01-05

我来回答

ChartJS 对齐线注记标签和标签注记

1条答案

相关问题

热门标签

最新问答