未捕获的类型错误：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;
    }
}

还有其他的方法可以执行类似这样的操作吗？

- Liam K

Answer 1

你的问题在于尝试在图表的config对象上调用.update()方法，而不是实际的图表实例。正如你所看到的，myRadarChart只是一个对象，它本身没有update()方法。但是，当你执行new Chart(ctx, myRadarChart);时创建的图表会提供.update()方法。

为了解决这个问题，你需要先将图表实例存储在某个地方：

var radarGraph = new Chart(ctx, myRadarChart);

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

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

然后在你的 radarGraph 对象上调用 update 方法：

radarGraph.update();

- Nick Parsons