ChartJS堆积条形图上的注解线

qcuzuvrc 于 2022-11-06 发布在 Chart.js

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

无法在堆叠条形图上使用注解线。
JS小提琴示例：https://jsfiddle.net/cledwyn/rd5q6Lsz/10/
我有https://www.chartjs.org/chartjs-plugin-annotation/latest/samples/charts/bar.html的标准注解

const annotation2 = {
  type: 'line',
  scaleID: 'x',
  borderWidth: 3,
  borderColor: 'black',
  value: 8,
  label: {
    rotation: 'auto',
    position: 'start',
    backgroundColor: 'black',
    content: 'Line at x=Label 5',
    enabled: true
  }
};

但是当我把这些条形图

scales: {
        xAxes: { stacked: true },
        yAxes: { stacked: true }
      },

则注解线只是从图表的一角到另一角。

chart.js

来源：https://stackoverflow.com/questions/73074010/chartjs-annotation-line-on-stacked-bar-chart

1条答案

按热度按时间

epggiuax1#

当运行JSFiddle时，您可以在控制台上看到以下警告。

"No scale found with id 'x' for annotation 'annotation2'"

因此，将scales.xAxes更改为scales.x应该可以解决部分问题。

scales: {
  x: { stacked: true },
  y: { stacked: true }
}

您还必须将缺少的标签添加到data.labels并调整annotation2.value。
请看一下下面修改后的代码，看看它是如何工作的。
第一个

赞(0）回复(0）举报 2022-11-06

我来回答

ChartJS堆积条形图上的注解线

1条答案

相关问题

热门标签

最新问答