Блок chartjs-plugin-annotation в приложении Django

У меня есть chartjs v2.9.3 в моем приложении Django, и он отлично работает. Теперь мне нужно добавить поле к одному из моих графиков, используя chartjs-plugin-annotation, и я выполнил все шаги, но не могу заставить его работать. Я использовал chartjs-plugin-annotation v0.5.7, который предназначен для v2.9.3. Я не получаю никаких ошибок в консольном журнале. Сначала скрипты с chart.js и плагинами:

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@0.5.7/chartjs-plugin-annotation.min.js"></script>

Мой код для графика (график работает, я просто не могу добиться появления окна):

<canvas id="myChart" height="250"></canvas>
<script>
                function setChart12(){
                    $('#myChart').remove();
                    $('#container_glavni').append('<canvas id="myChart" height="200"></canvas>');
                    var ctx = document.getElementById('myChart').getContext('2d');
                    var myChart = new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: date,
                            datasets: [{
                                label: 'Number of reports',
                                data: data_nc
                                }, {
                                    type: 'line',
                                    label: 'Median',
                                    data: [50],
                                    fill: false,
                                    borderColor: 'rgb(54, 162, 235)',
                                }],
                        },
                        options: {
                            layout: {
                                padding: {
                                  top: 30
                                }
                              },
                            responsive: true,
                            legend: {
                              display: false
                                       },
                            plugins: {
                                      datalabels: {
                                                anchor: 'end',
                                                align: 'end',
                                                offset: 5,
                                              },
                                      autocolors: false,
                                      annotation: {
                                        annotations: {
                                            box1: {
                                            type: 'box',
                                            xMin: 0,
                                            xMax: 1,
                                            yMin: 0,
                                            yMax: 30,
                                            backgroundColor: 'rgba(255, 99, 132, 0.25)'}
                                            }
                                        }
                                    },
                            scales: {
                                yAxes: [{
                                    ticks: {
                                        beginAtZero: true
                                        }
                                    }]
                                }
                            }
                    });}
            </script>

Я пробовал:

  • Различные значения для min и max
  • Различные цвета
  • Различное форматирование кода

Это потому, что вы поместили опции в то место, где они должны быть в V1 плагина аннотации и синтаксис тоже. В V0.5.7 опции аннотации должны быть помещены в корень опций, а также все аннотации представляют собой массив, а не отдельные объекты:

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1
      }
    ]
  },
  options: {
    annotation: {
      annotations: [{
        id: "hline",
        type: "line",
        mode: "horizontal",
        scaleID: "y-axis-0",
        value: 10,
        borderColor: "red",

      }]
    },
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@0.5.7/chartjs-plugin-annotation.min.js"></script>
</body>

Вернуться на верх