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

Question

我正在构建外部按钮来切换来自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;
    }
}

或者是否有其他方法可以执行类似的操作？

Answer 1

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

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

var radarGraph = new Chart(ctx, myRadarChart);

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

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

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

radarGraph.update();