时间戳

首页 > 解决方案 > 无法让 chartjs 用动态数据绘制图表（变量未硬编码）

javascript - 无法让 chartjs 用动态数据绘制图表（变量未硬编码）

问题描述

我正在尝试使用 chart.js 来绘制图表。我的用例非常简单，我从我的数据库中获取需要绘制在折线图上的数据。使用硬编码数据时，我可以让图表工作（即）

data: {
            labels: ["January", "February", "March"],
            datasets: [{
                label: "Occupancy",
                backgroundColor: 'rgb(255, 99, 132)',
                borderColor: 'rgb(255, 99, 132)',
                data: [1,2,3],
            }]
        },

尝试用变量数组替换 data: [1,2,3] 时，控制台中出现错误：

       var occ_labels = $('.chart_data_class')[0].dataset['occLbl'];
    //var occ_labels =["1","2","3"];
    console.log(occ_labels);
    var occ_twentyfive = $('.chart_data_class')[0].dataset['occ-25'];
    var ctx_occ = document.getElementById('occ-chart').getContext('2d');
    console.log(ctx_occ);
    var chart = new Chart(ctx_occ, {
        // The type of chart we want to create
        type: 'line',

        // The data for our dataset
        data: {
            labels: ["January", "February", "March"],
            datasets: [{
                label: "Occupancy",
                backgroundColor: 'rgb(255, 99, 132)',
                borderColor: 'rgb(255, 99, 132)',
                data: occ_twentyfive,
            }]
        },

        // Configuration options go here
        options: {
          legend: false,
        }
    });

    var ctx_adr = document.getElementById('adr-chart').getContext('2d');

然后出现以下错误：

jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3828 Uncaught TypeError: Object.defineProperty called on non-object
at Function.defineProperty (<anonymous>)
at e (Chart.min.js:12)
at a.buildOrUpdateElements (Chart.min.js:12)
at t.Controller.<anonymous> (Chart.min.js:11)
at Object.o.each (Chart.min.js:12)
at t.Controller.update (Chart.min.js:11)
at t.Controller.initialize (Chart.min.js:11)
at new t.Controller (Chart.min.js:11)
at new t (Chart.min.js:12)
at HTMLDocument.<anonymous> (interest.self-8876b9dfa2300b4adb2cc9db31f03dcc885a83d23bfc2247d8c08fa65a545fe9.js?body=1:16)

除了该变量之外，没有其他任何变化。该变量是有效的，并已在控制台中打印出来。我还尝试将变量设置如下：

var occ_twentyfive = [1,2,3];

这也不起作用。想法？我花了过去几个小时试图找出问题所在，但我无法弄清楚问题所在。

标签： javascriptchart.js

解决方案

令人惊讶的是，我刚刚回到该页面，它现在似乎正在工作，即使我之前已经启动并重新启动了多次服务器。也许某些东西正在某处缓存，并等待几天以某种方式重试修复它。不知道发生了什么...

推荐阅读