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

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>

我试过了：

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

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 box

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-04-11 16:32:44

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-04-11 16:32:44

解决方案1
1 已采纳 2022-04-11 16:32:44