Question

我正在为客户端开发一个Web应用程序，它有很多图表来显示有关多个事物的数据。

目前我正在制作一个图表，该图表将显示每个工作项目的技能，因为工作项目会一直添加和更改我无法像这样设置图表...

var workName1 = {
    labels : graphWork['New Work']['labels'],
    datasets : [            
        {
            fillColor : "rgba(151,187,205,0.5)",                
            highlightFill : "rgba(151,187,205,0.75)",
            data: graphWork['New Work']['values']
        }
    ]
}

window.onload = function(){       
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myBar = new Chart(ctx).Bar(workName1, {
         // invertXY: true
        // responsive : true,

    });   

 }

这样做会太静态，而且因为我会有一个类似这样的功能下拉，

$( "#typeUser" ).change(function() {
    window.myBar.destroy(); 
    chartType = $('#typeUser').val();
    if(chartType == "Random Work"){
        var ctx = document.getElementById("canvas").getContext("2d");
        window.myBar = new Chart(ctx).Bar(randomWork, {
            // responsive : true,
            invertXY: true
        });                
    }else if(chartType == "New Work"){
        var ctx = document.getElementById("canvas").getContext("2d");
        window.myBar = new Chart(ctx).Bar(workName1, {
            // responsive : true,
            invertXY: true
        });  
    }
});

同样，这也是非常静态的，如果添加新工作，则不允许动态更改。

问题： 我该怎么做才能动态设置它。我曾考虑在 graphWork 上做一个$ .each，然后是一些如何创建变量的方式然后我不知道我将如何进行更改功能或者如果这是正确的做法此？

我已经设置了一个提取数据的JSFiddle，可用于测试和查看我在做什么。 https://jsfiddle.net/L6396hsq/1/

Answer 1

如果用新数据填充，你可以用.draw（）来绘制画面元素。用.reflow（）你带回起动作; D

也许试试这个：

window.myBar.draw();
window.myBar.reflow();

ChartJS：如何动态创建数据数组

1 个答案: