Django 应用程序中的 chartjs-plugin-annotation 框

Question

我的 Django 应用程序中有 chartjs v2.9.3，它运行良好。现在我需要使用 chartjs-plugin-annotation 在我的一个图表中添加一个框，我已经按照所有步骤操作，但我无法让它工作。我使用了适用于 v2.9.3 的 chartjs-plugin-annotation v0.5.7。我在控制台日志中没有收到任何错误。首先，带有 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>

我试过：

最小值和最大值不同
不同颜色
不同的代码格式

Answer 1

这是因为您将选项放在了注释插件和语法的 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>

Django 应用程序中的 chartjs-plugin-annotation 框

chartjs-plugin-annotation box in Django app

django

graph

chart.js

chartjs-plugin-annotation