Chart.js 对单个图表进行动态类型切换时显示错误解决方案

最新推荐文章于 2025-06-28 10:17:21 发布

weixin_33831673

最新推荐文章于 2025-06-28 10:17:21 发布

阅读量607

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/colinadmin/blog/3052581

博客提及2019独角兽企业重金招聘Python工程师标准，还讲述了图标操作问题。实例化线型图标后，通过click事件更改datasets.type值会出现瞬移效果，解决办法是在渲染新图标前销毁旧图表。

2019独角兽企业重金招聘Python工程师标准>>>

假设第一步实例化了一个线型图标

var charts = new Chart(document.getElementById("myChart").getContext('2d'), {
        type   : 'bar',
        data   : {
            labels  : ['第1天' , '第2天' , '第3天' , 第4天],
            datasets : [
                {
                    label          : "粉丝数",
                    fill           : false,
                    backgroundColor: 'rgba(40,209,41,0.2)',
                    borderColor    : 'rgba(40,209,41,1)',
                    data           : [1 , 2 , 3 , 4],
                    yAxisID        : 'OD',
                    borderWidth    : 1,
                }
            ]
        },
        options: {
            scales: {
                yAxes: [{
                    id       : "OD",
                    type     : 'linear',
                    ticks    : {
                        beginAtZero: true
                    },
                    gridLines: {
                        drawOnChartArea: false
                    }
                }
                ]
            }
        }
    });

第二步当你在通过click事件更改datasets.type值时，就会出现瞬移效果....具体请自行检验

$('a').click(function(){
    charts.data.datasets[0].type = 'line';
    charts.update();
})

解决办法：渲染新的图标之前，销毁掉旧的图表

var charts = null;
function render(){
    if(charts){
        charts.destroy();
    }
    charts = new Chart(document.getElementById("myChart").getContext('2d'), {
        type   : 'bar',
        data   : {
            labels  : ['第1天' , '第2天' , '第3天' , 第4天],
            datasets : [
                {
                    label          : "粉丝数",
                    fill           : false,
                    backgroundColor: 'rgba(40,209,41,0.2)',
                    borderColor    : 'rgba(40,209,41,1)',
                    data           : [1 , 2 , 3 , 4],
                    yAxisID        : 'OD',
                    borderWidth    : 1,
                }
            ]
        },
        options: {
            scales: {
                yAxes: [{
                    id       : "OD",
                    type     : 'linear',
                    ticks    : {
                        beginAtZero: true
                    },
                    gridLines: {
                        drawOnChartArea: false
                    }
                }
                ]
            }
        }
    });
}
render();

转载于:https://my.oschina.net/colinadmin/blog/3052581