Невозможно клонировать диаграмму. js во всплывающем окне - PullRequest
Новая
       9

Невозможно клонировать диаграмму. js во всплывающем окне

0 голосов
/ 30 января 2020

Я пытаюсь отобразить график полной ширины во всплывающем окне, но оно отображает пустое всплывающее окно. Код написан с использованием Angular, TypeScript, Bootstrap и Chart. js. HTML Код 

<div class="col-lg-5" style="margin-right: 10px;">
      <img
        src="../../assets/images/popup-icon.jpg"
        data-toggle="modal"
        data-target=".bd-example-modal-xl"
        class="img-fluid"
        height="40px"
        width="40px"
        id="clone">
      <canvas height="280px" style="padding-right: 22px;" id="amplitudeChart">{{apmlitudeChart}}
      </canvas>
</div>
<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="col-md-12">
        <canvas id="largeAmplitudeChart">{{apmlitudeChart}}
        </canvas>
      </div>
    </div>
  </div>
</div>

Код машинописи 

import { Chart } from 'chart.js';

export class ChartsComponent implements OnInit {
apmlitudeChart: Chart;

ngOnInit() {
    this.apmlitudeChart = new Chart('amplitudeChart', {
      type: 'bar',
      data: {
        labels: ['1', '2', '3', '4', '5', '6', '7'],
        datasets: [
          {
            label: 'AMPLITUDE',
            data: [43, 53, 46, 34, 65, 34, 98],
            backgroundColor: '#47ECBB',

            fill: true
          }
        ]
      },
      options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
      }
    });
}

Пожалуйста, помогите мне разобраться, как показать тот же график во всплывающем окне, используя Angular, Графики JS и машинопись. И если есть хорошо объясненное руководство по использованию диаграммы JS в Angular, пожалуйста, поделитесь им со мной. спасибо

1 Ответ

0 голосов
/ 30 января 2020

Вы можете использовать JavaScript для достижения этой цели: Рабочий пример: https://stackblitz.com/edit/angular-playground-i6sycz?file=app / hello-framework / hello-framework.component.ts 

openChart(){
  var canvas = <HTMLCanvasElement>document.getElementById("amplitudeChart");
  let canvasClone = this.cloneCanvas(canvas);
  console.log(canvasClone)
  var myWindow = window.open();
  myWindow.document.body.appendChild(canvasClone);
}

cloneCanvas(oldCanvas) {

    //create a new canvas
    var newCanvas = document.createElement('canvas');
    var context = newCanvas.getContext('2d');

    //set dimensions
    newCanvas.width = oldCanvas.width;
    newCanvas.height = oldCanvas.height;

    //apply the old canvas to the new one
    context.drawImage(oldCanvas, 0, 0);

    //return the new canvas
    return newCanvas;
}
...