ChartJS 3 垂直注释

Question

我正在尝试将我的 chartjs 升级到 v3 以及注释插件。尝试了几种不同的方法，但似乎无法显示垂直注释。尝试显式添加 xScaleID/yScaleID 但我相信在 v3 中 x/y 是新的默认值，因此无论如何都希望它们成为默认值。

将整个事情简化为 JSFiddle

const data = {
  "labels": [
    "07/09/2020",
    "14/09/2020",
    "21/09/2020",
    "28/09/2020",
    "05/10/2020",
    "19/10/2020",
    "02/11/2020",
    "09/11/2020",
    "16/11/2020",
    "23/11/2020",
    "30/11/2020",
    "07/12/2020",
    "14/12/2020",
    "04/01/2021",
    "11/01/2021",
    "18/01/2021",
    "25/01/2021",
    "01/02/2021",
    "08/02/2021",
    "22/02/2021",
    "01/03/2021",
    "08/03/2021",
    "15/03/2021",
    "22/03/2021",
    "29/03/2021",
    "19/04/2021",
    "26/04/2021",
    "03/05/2021",
    "10/05/2021",
    "17/05/2021",
    "24/05/2021",
    "07/06/2021",
    "14/06/2021",
    "21/06/2021"
  ],
  "datasets": [{
    "label": [
      "Information"
    ],
    "data": [
      "90",
      "92",
      "94.29",
      "100",
      "100",
      "93.85",
      "90",
      "95.38",
      "90",
      "98.95",
      "100",
      "100",
      "100",
      null,
      null,
      "60",
      null,
      null,
      null,
      null,
      "80",
      "100",
      null,
      "100",
      null,
      "80",
      "100",
      null,
      "100",
      "100",
      "100",
      "100",
      "100",
      "100"
    ],
    fill: false,
    borderColor: 'rgb(75, 192, 192)'
  }]
}

var chart = new Chart('chart1', {
  type: 'line',
  data: data,
  options: {
    responsive: true,
    maintainAspectRatio: false,
    bezierCurve: false,
    spanGaps: true,
    scales: {
      y: {
        beginAtZero: true
      }
    }
  },
  plugins: {
    annotation: {
      annotations: {
        line1: {
          type: 'line',
          mode: 'vertical',
          xMin: '09/11/2020',
          xMax: '09/11/2020',
          borderColor: "#56A6A6",
          borderWidth: 10
        }
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/1.4.0/chartjs-plugin-annotation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<canvas id="chart1" height="400">

</canvas>

如果有人有任何想法，请告诉我。

Answer 1

首先你配置了错误的选项space，插件选项必须在选项对象中。您使用的插件部分用于包含内联插件的数组，其次您需要在 chart.js 之后包含注释插件，因为 chart.js 需要首先加载，因为注释插件使用 [=20] 中的一些函数=]:

const data = {
  "labels": [
    "07/09/2020",
    "14/09/2020",
    "21/09/2020",
    "28/09/2020",
    "05/10/2020",
    "19/10/2020",
    "02/11/2020",
    "09/11/2020",
    "16/11/2020",
    "23/11/2020",
    "30/11/2020",
    "07/12/2020",
    "14/12/2020",
    "04/01/2021",
    "11/01/2021",
    "18/01/2021",
    "25/01/2021",
    "01/02/2021",
    "08/02/2021",
    "22/02/2021",
    "01/03/2021",
    "08/03/2021",
    "15/03/2021",
    "22/03/2021",
    "29/03/2021",
    "19/04/2021",
    "26/04/2021",
    "03/05/2021",
    "10/05/2021",
    "17/05/2021",
    "24/05/2021",
    "07/06/2021",
    "14/06/2021",
    "21/06/2021"
  ],
  "datasets": [{
    "label": [
      "Information"
    ],
    "data": [
      "90",
      "92",
      "94.29",
      "100",
      "100",
      "93.85",
      "90",
      "95.38",
      "90",
      "98.95",
      "100",
      "100",
      "100",
      null,
      null,
      "60",
      null,
      null,
      null,
      null,
      "80",
      "100",
      null,
      "100",
      null,
      "80",
      "100",
      null,
      "100",
      "100",
      "100",
      "100",
      "100",
      "100"
    ],
    fill: false,
    borderColor: 'rgb(75, 192, 192)'
  }]
}

var chart = new Chart('chart1', {
  type: 'line',
  data: data,
  options: {
    plugins: {
      annotation: {
        annotations: {
          line1: {
            type: 'line',
            mode: 'vertical',
            xMin: '09/11/2020',
            xMax: '09/11/2020',
            borderColor: "#56A6A6",
            borderWidth: 10
          }
        }
      }
    },
    responsive: true,
    maintainAspectRatio: false,
    bezierCurve: false,
    spanGaps: true,
    scales: {
      y: {
        beginAtZero: true
      }
    }
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/1.4.0/chartjs-plugin-annotation.min.js"></script>
<canvas id="chart1" height="400">

</canvas>

ChartJS 3 垂直注释

ChartJS 3 vertical annotations

javascript

annotations

chart.js