Повторное открытие диаграммы "ChartJS" в новом окне (VS, C #, ChartJS) - PullRequest
Новая
       1

Повторное открытие диаграммы "ChartJS" в новом окне (VS, C #, ChartJS)

0 голосов
/ 08 декабря 2018

Моя среда разработки - VS C # 2015

  1. Я использовал четыре (4) " chartjs " диаграммы в одном файле aspx.
  2. каждая диаграмма в отдельных четырех файлах .ascx (пользовательский контроллер).
  3. По запросу пользователя система сгенерирует эти 4 графика в соответствии с фильтрацией клиентов.Этот процесс требует времени, потому что он требует необходимые данные из БД.
  4. После загрузки на одну страницу .aspx клиенту снова нужно повторно открыть каждый график на отдельной новой странице.

Мой вопрос: Могу ли я снова открыть этот же график на отдельной новой странице, не загружая его данные из базы данных ?

Большое спасибо

1 Ответ

0 голосов
/ 10 декабря 2018

Да, все экземпляры диаграмм доступны через переменную Chart.instances, вы можете использовать передачу этих значений с одной страницы на другую, используя несколько методов JS, таких как localStorage, пара keyValue и т. Д.

Как только вы сможете получить доступ к переменной Chart.instances на другой странице, просто выполните цикл и создайте диаграммы, используя свойство config Chart.instances.Посмотрите код ниже, где я скопировал диаграмму, используя 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);
  });
}
...