使用 chartjs-plugin-annotation 和 vue-chartjs 绘制垂直阈值

问题描述

我尝试定位 2 条垂直线，它们是某些测试结果列表的阈值。我的问题是，当我尝试获取不属于结果的值时，未显示线条。使用以下代码，我看到了这些行。

<script>
import BarChart from "@/components/Testsstatictics/BarChart.vue";
export default {
  components: {
    BarChart,},data() {
    return {
      chartData: {
        labels: [24.35,24,24.2,24.28],datasets: [
          {
            label: "Bar Chart",backgroundColor: [
              "rgba(255,99,132,0.2)","rgba(54,162,235,"rgba(255,206,86,"rgba(75,192,],borderColor: [
              "rgba(255,1)",pointBorderColor: "#2554FF",data: [24.35,options: {
        annotation: {
          annotations: [
            {
              type: "line",mode: "vertical",scaleID: "x-axis-0",value: 24.35,borderColor: "green",borderWidth: 1,label: {
                enabled: true,position: "center",content: "22.70",{
              type: "line",value: 24.28,content: "25.70",scales: {
          yAxes: [
            {
              ticks: {
                beginAtZero: true,gridLines: {
                display: true,xAxes: [
            {
              gridLines: {
                display: false,barThickness: 30,legend: {
          display: true,responsive: true,maintainAspectRatio: false,};
  },};
</script>

但是如果我将注释的一部分更改为此（注释的值不在数据和标签值内），则不起作用：

annotations: [
            {
              type: "line",value: 22,content: "22",value: 26,content: "26",

解决方法

尝试为轴设置最大值和最小值：

suggestedMax,suggestedMin

        scales: {
          xAxes: [
            {
              gridLines: {
                display: false,},ticks: {
                suggestedMax: 35,suggestedMin: 20
              },barThickness: 30,],

chartjs-plugin-annotation vue-chartjs vue.js