Chart.Js-“尝试更新图表时无法读取未定义的属性'数据集'”

时间:2019-02-10 23:45:49

标签: javascript chart.js

我在这里研究了很多有关如何动态更新chart.js图表​​的主题。我已尝试尽我所能,但每次我尝试使用数据库中的数据定期更新图表时,都会出现上述错误。

我声明sentimentMainContent,它是页面完全加载时的图表对象。在文档准备功能中,存在getStatsUpdate函数,该函数定期调用数据库以检索有关足球比赛的主队和客队的正负情绪的数据。
检索数据后,它将首先创建图表(在statsRenderCount为0时执行此操作),随后将对其进行更新。它使用来自初始调用的数据正确地创建了图的第一部分,但是随后的调用将进入else语句并尝试更新图表。在这里,我收到 “无法读取未定义的属性'datasets'” 错误。

据我所知,似乎并没有意识到sentimentMainContent的存在,就好像它在其范围之内不存在一样,但是我知道这是不正确的,因为我ve在文档准备好加载函数的最开始就声明了它,getStatsUpdate()位于其中。因此,sentimentMainContent不能不确定吗?

$(document).ready(function(){
var sentimentMainContent = 0;
    ...
    ...
    ...
function getStatsUpdate(){
    ...
    var result = initialResponse.split("___");
tweet_time = result[0]
home_avg = result[1];
home_positive = result[2];
home_negative = result[3];
home_neutral = result[4];

away_avg = result[5];
away_positive = result[6];
away_negative = result[7];
away_neutral = result[8];

var home_sentiment = {
                        labels: [
                            homeTeam + " Positive",
                            homeTeam + " Negative",
                            awayTeam + " Positive",
                            awayTeam + " Negative",
                        ],
                        datasets: [
                            {
                                data: [home_positive, home_negative, away_positive, away_negative],
                                backgroundColor: [
                                    "#F5003F",
                                    "#3C9BFF",
                                    "#26FF9A",
                                    "#FFE951"
                                ],
                                borderColor: [
                                    "black",
                                    "black",
                                    "black",
                                    "black",
                                    "black",
                                    "black"
                                ],
                                borderWidth: [
                                    "0.5",
                                    "0.5",
                                    "0.5",
                                    "0.5",
                                    "0.5",
                                    "0.5",
                                ],
                                hoverBackgroundColor: [
                                    "#F5003F",
                                    "#FAFAFA",
                                    "#3C9BFF",
                                    "#26FF9A",
                                    "#FF5720",
                                    "#FFE951"
                                ]
                            }
                        ]
                    };

if(statsRenderCount == 0)
{
    alert("re-rendering!");
    sentimentMainContent = new Chart(document.getElementById("sentiment-stat"), {
        type: 'doughnut',
        data: home_sentiment,
        options: {
                cutoutPercentage: 60,
                responsive: true,
                legend: {
                    display: false
            },
            tooltips: {
                filter: function(item, home_sentiment) {
                    var label = home_sentiment.labels[item.index];
                    if (label) return item;
                }
            }
        }
    });
    statsRenderCount += 1;
}
else
{
    alert("updating");
    sentimentMainContent.home_sentiment.datasets[0] = home_sentiment;
    sentimentMainContent.update();
}
}

我也尝试了sentimentMainContent.home_sentiment = home_sentiment;,因为该方法似乎存在缺陷,因为sentimentMainContent.home_sentiment.datasets[0]代表了数据集数组,并且我为此分配了整个home_sentiment变量,这似乎是不正确的。无论如何,当我进行此更改时,都不会发生错误,但是图表根本不会更新。

我在这里俯瞰着什么吗?

0 个答案:

没有答案