ChartJS 3 вертикальные аннотации

Я пытаюсь обновить свои диаграммы до версии 3, а вместе с ней и плагин аннотаций. Пробовал несколько разных способов, но просто не может показать вертикальную аннотацию. Пробовал явно добавлять xScaleID/yScaleID, но я считаю, что в версии 3 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>

Если у кого-то есть идеи, пожалуйста, дайте мне знать.

javascript annotations chart.js

23.03.2022 00:04

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Сначала вы настроили параметры в неправильном месте, параметры плагина должны находиться внутри объекта параметров. Раздел плагинов, который вы использовали, предназначен для массива, содержащего встроенные плагины, во-вторых, вам нужно включить плагин аннотаций после chart.js, поскольку сначала нужно загрузить chart.js, потому что плагин аннотаций использует некоторые функции из chart.js:

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>

23.03.2022 08:56

Другие вопросы по теме

Как выдать ошибку обработки аннотации, если используется класс с пользовательской аннотацией Java

Аннотация Kotlin - Требовать, чтобы параметр был постоянной переменной из определенного класса

Автоматически генерировать методы замены

Исключение ClassNotFound при выполнении Java AnnotationProcessor

Обработка исключений в JavaEE без web.xml

Можно ли расширить аннотацию Python (например, класс данных) в код, который он создает?

Как отключить взаимодействие с пользователем для MGAnnotation?

Как получить аннотацию над аннотацией

Аннотации из javax.validation.constraints не работают (игнорируются)

Как рисовать независимые от масштаба стрелки с помощью matplotlib

ChartJS 3 вертикальные аннотации

Ответы 1

Другие вопросы по теме

Похожие вопросы