时间戳

首页 > 解决方案 > 未捕获的类型错误：mychart.update 不是函数

javascript - 未捕获的类型错误：mychart.update 不是函数

问题描述

我正在构建外部按钮来切换来自chartjs的数据的可见性，但它只会在屏幕尺寸发生变化时起作用。所以，我发现可以使用 mychart.update() 来解决问题。但它让我得到了我在标题中陈述的错误。

这是我的图表：

var myRadarChart = {
    type: 'radar',
    data: {
            labels: lbl,
            datasets: [
                {
                    label: 'Houses',
                    data: yh,
                    backgroundColor:['rgba(0, 123, 255, 0.5)'],
                    borderColor: ['rgba(0, 123, 255, 0.8)'],
                    hidden:false
                },
                {
                    label: 'Apartments',
                    data: ya,
                    backgroundColor:['rgba(40,167,69, 0.5)'],
                    borderColor: ['rgba(40,167,69, 0.8)'],
                    hidden:false
                },
                {
                    label: 'Rooms',
                    data: yr,
                    backgroundColor:['rgba(218, 17, 61,0.5)'],
                    borderColor: ['rgba(218,17,61,0.8)'],
                    hidden:false
                }
            ]

        },
    options: {
        legend:{
            display:true,
            onHover: function(event, legendItem) {
            document.getElementById("myRadarChart").style.cursor = 'pointer';},
        },
        maintainAspectRatio:false,
        scale: {
            angleLines: {
                display: true
                },
            ticks: {
                suggestedMin: 0,
                suggestedMax: 0
                }
            }
        }
    };
var ctx = document.getElementById('myRadarChart').getContext('2d');
new Chart(ctx, myRadarChart);

而我试图做的是：

//Onclick
function getData(dontHide){
switch(dontHide){
        case 0:
            myRadarChart.data.datasets[0].hidden=false;
            myRadarChart.data.datasets[1].hidden=true;
            myRadarChart.data.datasets[2].hidden=true;
            myRadarChart.update();
            break;
        case 1:
            myRadarChart.data.datasets[0].hidden=true;
            myRadarChart.data.datasets[1].hidden=false;
            myRadarChart.data.datasets[2].hidden=true;
            myRadarChart.update();
            break;
        case 2:
            myRadarChart.data.datasets[0].hidden=true;
            myRadarChart.data.datasets[1].hidden=true;
            myRadarChart.data.datasets[2].hidden=false;
            myRadarChart.update();
            break;
    }
}

还是有其他方法可以执行此类操作？

标签： javascripthtmlchart.js

解决方案

您的问题是您试图在图形的配置.update()对象上调用该方法，而不是您的实际图形实例。如您所见，它只是一个对象，它没有调用方法。但是，您在执行时创建的图表确实为您提供了方法。myRadarChartupdate()new Chart(ctx, myRadarChart);.update()

要解决您的问题，您需要首先将图表的实例存储在某处：

var radarGraph = new Chart(ctx, myRadarChart);

然后更新图形的数据（而不是直接更新您的配置对象）：

radarGraph.data.datasets[0].hidden = false;
...

radarGraph然后在您的对象上调用更新方法：

radarGraph.update();

推荐阅读