Question

我正在使用前端的backbonejs框架和图表的chartjs，所以要保持简单：

我有一个视图，可以完美地呈现标签，并且每个标签都有其中的图表
第一次图表加载完美，一切都很顺利
当我再次点击某个标签时，它会重新呈现所有内容，包括从头开始的图表

问题：“当切换回标签图表时没有显示”

我的功能就像：

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 log：CanvasRenderingContext2D {textBaseline：“alphabetic”，textAlign：“start”，font：“12px”Helvetica Neue“，Helvetica，Arial，sans-serif”，lineDashOffset：0，miterLimit：10 ...}

myBarchart log：Chart.Type.extend.ChartType {options：Object，chart：Chart，id：“chart-0”，ScaleClass：function，datasets：Array [1] ...}

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

ctx log：CanvasRenderingContext2D {textBaseline：“alphabetic”，textAlign：“start”，font：“12px”Helvetica Neue“，Helvetica，Arial，sans-serif”，lineDashOffset：0，miterLimit：10 ...}

myBarChart log：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

请不要因为我在这里的新工作而对我进行评判提前谢谢

Answer 1

在图表画布可见之后，即在切换（并显示）标签后，您必须调用createChart函数。

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

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

1 个答案: