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();

但这似乎只是在窗口范围内设置一个名为dayChart的对象。我使用窗口范围的原因是因为这是我甚至可以让Chartjs工作的唯一方法;选择DOM中的元素并在其上运行Chartjs方法由于某种原因不起作用。

每天都有一个带有唯一ID的画布（例如，＃canvas08-18-2015），所以我尝试选择画布并在其上运行Chartjs方法，但没有骰子。

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

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

然后再调用它来传递.update（）或其他一些方法？

Answer 1

但这似乎只是设置了一个名为dayChart的对象窗口范围。

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

初始化（一次）

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);

您可以通过密钥获取实例

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();

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

1 个答案: