我如何重置 chartjs 对象的所有实例并从头开始重新创建它？

Question

我在前端使用backbonejs框架，在图表中使用chartjs， 所以为了简单起见：

1. 我有一个可以完美呈现选项卡的视图，并且在每个选项卡中都有 里面有一个图表

2. 第一次图表加载完美，一切顺利

3. 当我再次单击某个选项卡时，它会重新呈现所有内容，包括从头开始的图表

问题：“切换回选项卡时图表不显示”

我的功能是这样的：

createChart: function(collection){
var that = this;

/* this is for the collection that i coming from an API and i am just    spliting it into two arrays */ 
var data1 = [],
data2 = [];
collection.each(function(model){
data1.push(model.get('count'));
data2.push(model.get('title'));
}) 



// chartjs code
var data = {
labels: data2,
datasets: [
{
label: "My Second dataset",
fillColor: "#007B9D",
strokeColor: "#00BFF3",
pointColor: "#00BFF3",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: data1
}
]};

//"this" is the reference to above declared variable 
this.ctx = document.getElementById("user-activity- chart").getContext("2d");  
this.myBarChart = new Chart(that.ctx).Bar(data);

console.log(this.ctx);
console.log(this.myBarChart);

},

我将第一次值记录到控制台中，如下所示

ctx 日志：CanvasRenderingContext2D {textBaseline: "alphabetic", textAlign: "start", font: "12px "Helvetica Neue", Helvetica, Arial, sans-serif", lineDashOffset: 0, miterLimit: 10…}

myBarchart 日志：Chart.Type.extend.ChartType {options: Object, chart: Chart, id: "chart-0", ScaleClass: function, datasets: Array[1]…}

我第二次（在切换选项卡后）将值记录到控制台中，如下所示

ctx 日志：CanvasRenderingContext2D {textBaseline: "alphabetic", textAlign: "start", font: "12px "Helvetica Neue", Helvetica, Arial, sans-serif", lineDashOffset: 0, miterLimit: 10…}

myBarChart 日志：Chart.Type.extend.ChartType {options: Object, chart: Chart, id: "chart-1", ScaleClass: function, datasets: Array[1]…}

我试过了

myBarchart.destroy()
myBarchart.clear()
myBarchart.update()

所有这些方法

还尝试在这里解决问题：https://gist.github.com/skhisma/5689383

请不要评判我，因为我是backbonejs的新手 在此先感谢

Answer 1

您必须在图表画布可见之后（即在您切换（并显示）选项卡之后）调用您的 createChart 函数。

在此之前执行此操作将导致 Chartjs 将画布宽度和高度读取为 0，从而不显示图表。