创建多个图表并稍后选择它们

Question

我正在开发一个每天都有图表的日历，它应该根据各个单元格中的事件数据以不同方式呈现段。

这是我创建的图表的样子。这是在 fullcalendar 的 dayRender 事件中发生的，所以它是运行每一天的确切代码

            var theCanvas = $('canvas#'+idDate);
            var initialSegements = getTotalNumberOfSegments();
            var pieData = [];

            for(var i=0; i < initialSegements; i++){
                var o = {
                    value: 360/initialSegements,
                    color: '#fff'
                }
                pieData.push(o)
            };

            var pieOptions = {
                segmentShowStroke : true,
                segmentStrokeColor : "#dedede",
                segmentStrokeWidth : 1,
                percentageInnerCutout : 0,
                animation : true,
                animationSteps : 30,
                animationEasing : "easeOut",
                animateRotate : true,
                animateScale : true,
            }

            var ctx = theCanvas.get(0).getContext("2d");
            window.dayPieChart = new Chart(ctx).Pie(pieData,pieOptions);
            window.dayPieChart.update();

但这似乎只是在 window 范围内设置一个名为 dayChart 的对象。我使用 window scope 的原因是因为这是我什至可以让 Chartjs 工作的唯一方法；由于某种原因，在 DOM 和运行 Chartjs 方法中选择一个元素不起作用。

每一天都有一个具有唯一 ID 的 canvas（例如，#canvas08-18-2015），所以我尝试选择 canvas 和运行一个 Chartjs 方法，但没有骰子。

那么如何为 CHART 创建一个唯一的 ID？我该怎么做：

window.[UNIQUE ID STORED IN VAR GOES HERE] = new Chart(ctx).Pie(data,options);

然后调用它传递.update()或其他一些方法？

Answer 1

But that seems like it's just setting ONE object called dayChart in the window scope.

那是因为您每次都将图表实例分配给同一个变量。你可能想要的是

要初始化（一次）

window.piieCharts = [];

然后每次创建图表时

window.piieCharts.push(new Chart(ctx).Pie(pieData,pieOptions));

你可以通过索引获取实例

window.piieCharts[0].update();

或者您可以使用对象。初始化

window.piieCharts = {};

然后每次创建图表时

window.piieCharts['canvas#'+idDate] = new Chart(ctx).Pie(pieData,pieOptions);

并且可以通过key获取实例

window.piieCharts['canvas#'+idDate].update();

另外，由于 Chart.js 将它创建的每个实例（直到它们被销毁）存储在 Chart.instances 中，您也可以

var myInstance;
Chart.helpers.each(Chart.instances, function(instance) { 
    if (instance.chart.canvas === document.getElementById('canvas#'+idDate))
         myInstance = instance;
});
myInstance.update();

创建多个图表并稍后选择它们

Creating multiple charts and selecting them later

javascript

chart.js