Question

我有一个用 ASP .NET Core 编写的 Web 应用程序，其中一个页面上有一个使用 chartJS 创建的条形图（它从数据库中获取数据）。我正在尝试在图表中的每个条形上显示数据值。我尝试使用 this plugin，但随后我的图表没有显示在页面上，并且出现以下错误：Uncaught ReferenceError: ChartDataLabels is not defined 和 Uncaught TypeError：无法设置未定义的属性“datalabels”：
这是我的图表代码：

            <script src="https://cdn.jsdelivr.net/npm/chart.js@2.3.0/dist/Chart.min.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@1.0.0"></script>
            <div>
                <canvas id="workTSChart_MTK"></canvas>
            </div>                
            <script>
                $(document).ready(function () {
                    $.ajax({
                        type: "Get",
                        url: '@Url.Action("OnGetWorkTSData_MTK","home")',
                        contentType: "application/json",
                        dataType: "json",
                        success: function (response) {
                            var data = response.hrPlan;
                            var data2 = response.hrReestr;
                            var data3 = response.hrFact;

                            console.log("hrPlan=" + response.hrPlan);
                            console.log("hrSub=" + response.hrReestr);
                            console.log("hrFact=" + response.hrFact);

                            var ctx = document.getElementById("workTSChart_MTK");
                            var workTSChart = new Chart(ctx, {
                                plugins: [ChartDataLabels],
                                type: 'bar',
                                data: {
                                    labels: [
                                        'ООО "МТК"',
                                    ],
                                    datasets: [{
                                        label: 'Plan',
                                        data: [response.hrPlan],
                                        backgroundColor: 'rgb(161, 221, 239)',
                                        borderColor: 'rgb(161, 221, 239)',
                                    },
                                    {
                                        label: 'Sub',
                                        data: [data2],
                                        backgroundColor: 'rgb(254, 171, 133)',
                                        borderColor: 'rgb(254, 171, 133)',
                                    },
                                    {
                                        label: 'Fact',
                                        data: [data3],
                                        backgroundColor: 'rgb(127, 137, 138)',
                                        borderColor: 'rgb(127, 137, 138)',
                                    }]
                                },
                                options: {
                                    responsive: true,
                                    scales: {
                                        y: {
                                            max: 600000,
                                            min: 500000,
                                            ticks: {
                                                stepSize: 10000,
                                            }
                                        }
                                    },
                                    plugins: {
                                        datalabels: {
                                            color: '#000000',
                                            display: true,
                                        },
                                        legend: {
                                            position: 'top',
                                        },
                                        title: {
                                            display: true,
                                            text: 'Sample title'
                                        }
                                    }
                                },
                            });

                        },
                        error: function (response) {
                            alert(response.responseText);
                            console.log("This is ERROR line");
                        }
                    });
                });
            </script>

我错过了什么？

更新： 由于 @LeeLenalee 的建议，我已经更新了我的代码，但现在我收到另一条错误消息：未捕获的类型错误：无法读取未定义的属性“跳过”
更新代码：

            <div>
                <canvas id="workTSChart_MTK"></canvas>
            </div>                      
            <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-datalabels@1.0.0"></script>
            <script>
                $(document).ready(function () {
                    $.ajax({
                        type: "Get",
                        url: '@Url.Action("OnGetWorkTSData_MTK","home")',
                        contentType: "application/json",
                        dataType: "json",
                        success: function (response) {
                            var data = response.hrPlan;
                            var data2 = response.hrReestr;
                            var data3 = response.hrFact;
                            
                            console.log("hrPlan=" + response.hrPlan);
                            console.log("hrSub=" + response.hrReestr);
                            console.log("hrFact=" + response.hrFact);

                            var ctx = document.getElementById("workTSChart_MTK");
                            var workTSChart = new Chart(ctx, {  
                                plugins: [ChartDataLabels],
                                type: 'bar',
                                data: {
                                    labels: [
                                        'ООО "МТК"',
                                    ],
                                    datasets: [{
                                        label: 'Plan',
                                        data: [response.hrPlan],
                                        backgroundColor: 'rgb(161, 221, 239)',
                                        borderColor: 'rgb(161, 221, 239)',
                                    },
                                    {
                                        label: 'Sub',
                                        data: [data2],
                                        backgroundColor: 'rgb(254, 171, 133)',
                                        borderColor: 'rgb(254, 171, 133)',
                                    },
                                    {
                                        label: 'Hour',
                                        data: [data3],
                                        backgroundColor: 'rgb(127, 137, 138)',
                                        borderColor: 'rgb(127, 137, 138)',
                                    }]
                                },
                                options: {
                                    responsive: true,
                                    scales: {
                                        y: {
                                            max: 600000,
                                            min: 500000,
                                            ticks: {
                                                stepSize: 10000,
                                            }
                                        }
                                    },
                                    plugins: {
                                        datalabels: {
                                            color: '#000000',
                                            display: true,
                                        },
                                        legend: {
                                            position: 'top',
                                        },
                                        title: {
                                            display: true,
                                            text: 'Sample title'
                                        }
                                    }
                                },
                            });

                        },
                        error: function (response) {
                            alert(response.responseText);
                            console.log("This is ERROR line");
                        }
                    });
                });
            </script>

更新 2： 事实证明，有一个与 ChartJS 3.0 一起使用的 chartjs-plugin-datalabels 的更新版本，因此解决方案是实现两者的最新版本，如下所示：

<body>    
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.5.0/dist/chart.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0/dist/chartjs-plugin-datalabels.min.js"></script>        
</body>

Answer 1

如 documentation 中所述，您至少需要安装 Chart.js 2.7.0 版，您目前使用的是 2.3.0。

之后，您必须通过调用 Chart.plugins.register(ChartDataLabels); 全局注册插件，以便所有图表都有数据标签，或者将其本地注册到您想要标签的图表，如下例所示：

const options = {
  type: 'bar',
  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: {
    scales: {
      yAxes: [{
        ticks: {
          reverse: false
        }
      }]
    }
  },
  plugins: [ChartDataLabels]
}

const 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-datalabels@1.0.0"></script>
</body>

无法在chartJS中显示数据标签

1 个答案: