chartjs question：注记标号位置问题

yruzcnhs 于 2023-04-06 发布在 Chart.js

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

关于Chartjs 3.x和chartjs插件注解的问题
我已经使用chartjs和chartjs-plugin-annotation x1c 0d1x创建了这个图表（除了绿色文本），但是我无法将绿色文本“100%”放置在水平线的最右侧。
我试过改变annotations.label.xValue和annotations.label.xAdjust，但标签被切断，因为它被放置在画布之外。

这是我的代码的一部分↓

annotation: {
                annotations: {
                    line1: {
                        type: "line" as const,
                        yMin: 20,
                        yMax: 20,
                        borderColor: "rgba(0, 186, 52, 1)",
                        borderWidth: 2,
                    },
                    label1: {
                        type: "label",
                        content: ["100%"],
                        color: "rgba(0, 186, 52, 1)",
                        yValue: 20,
                        xValue:'4/7',
                        xAdjust: 10
                    },
                },
            },

有人知道怎么做吗？

chart.js

来源：https://stackoverflow.com/questions/75936106/chartjs-question-annotation-label-position-problem

1条答案

按热度按时间

jqjz2hbq1#

您应该禁用图表区域上的剪辑，如下所示（使用您的代码）：

annotation: {
   clip: false, // <-- must be added
   annotations: {
     line1: {
       type: "line" as const,
       yMin: 20,
       yMax: 20,
       borderColor: "rgba(0, 186, 52, 1)",
       borderWidth: 2,
     },
     label1: {
       type: "label",
       content: ["100%"],
       color: "rgba(0, 186, 52, 1)",
       yValue: 20,
       xValue:'4/7',
       xAdjust: 10
     },
  },
},

如果我可以添加几个提示：
1.在图表右侧添加空格，这些空格是必须绘制标签的位置（按options.layout.padding）
1.只能使用带内部标签的线注记（而不是2注记）
在这里看到一个codepen：https://codepen.io/stockinail/pen/zYmOaLz

赞(0）回复(0）举报 2023-04-06

我来回答

chartjs question：注记标号位置问题

1条答案

相关问题

热门标签

最新问答