在新窗口中重新打开“ChartJS”图表（VS、C#、ChartJS）

Question

我的开发环境是 VS C# 2015

1. 我在单个 aspx 文件中使用了四 (4) 个“chartjs”图表。
2. 每个图表在一个单独的四个 .ascx 文件中（用户控制器）。
3. 根据用户要求，系统会根据客户过滤生成这4个图表。此过程需要时间，因为它需要从数据库中获取所需数据。
4. 一旦加载到单个 .aspx 页面，客户再次需要在单独的新页面中重新打开每个图表。

我的问题是，我可以在不从数据库中加载数据的情况下将同一个图表重新打开到单独的新页面？

非常感谢

Answer 1

是的，图表的所有实例都可以通过Chart.instances变量访问，你可以使用localStorage、keyValue对等几种JS方法将这些值从一个页面传递到另一个页面。

一旦您可以访问另一个页面中的Chart.instances 变量，只需循环并使用Chart.instances 的config 属性创建图表。请参阅下面的代码，其中我使用Chart.instances 复制了图表。在这里，我为图表创建了一个固定的画布占位符，您可以动态创建它，也可以预先在另一个页面中创建四个画布占位符。小提琴 -> http://jsfiddle.net/Lzo5g01n/7/

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: 'rgba(255, 99, 132, 0.2)',
      borderColor: 'rgba(255,99,132,1)',
      borderWidth: 1
    }, {
      label: '# of Votes1',
      data: [17, 9, 13, 9, 20, 13],
      backgroundColor: 'rgba(54, 162, 235, 0.2)',
      borderColor: 'rgba(54, 162, 235, 1)',
      borderWidth: 1
    }, {
      label: '# of Votes2',
      data: [1, 6, 13, 12, 20, 5],
      backgroundColor: 'rgba(255, 206, 86, 0.2)',
      borderColor: 'rgba(255, 206, 86, 1)',
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

function copyChart() {  
  Chart.helpers.each(Chart.instances, function(instance) {
    var ctxCopy = document.getElementById("myChartCopy").getContext('2d');
    new Chart(ctxCopy, instance.config);
  });
}