angular - 如何放大 angular 8 中的primeng p-chart？

Question

p-chart zoom 在我的项目中不起作用。角度版本是 8.3.21，primeNG 版本是 9.0.0，chartjs-plugin-zoom 版本是 0.7.7，我没有在我的项目中添加hammer.js。我的 HTML 代码是：

<div class="center"> 
<p-chart type="line" [data]="data" [options]="option"></p-chart> </div>

我的 ts 代码是：

option;
  data= {
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [{
        label: 'My First Dataset',
        data: [65, 59, 80, 81, 56, 55, 40],
        fill: false,
        borderColor: 'rgb(75, 192, 192)',
        tension: 0.1
      }]
    }

  ngOnInit(): void {
    this.option = {

      title: {
        text: 'Chart.js Time Scale'
      },
      plugins: {
        zoom: {
          zoom: {
            enabled: true,
            drag: {
              borderColor: 'rgba(225,225,225,0.3)',
              borderWidth: 5,
              backgroundColor: 'rgb(225,225,225)'
            },
            mode: 'xy',
            rangeMin: {
              x: null,
              y: null
            },
            rangeMax: {
              x: null,
              y: null
            },
            speed: 0.1,
            onZoom: function({ chart }) {
              console.log(`I'm zooming!!!`);
            },
            onZoomComplete: function({ chart }) {
              console.log(`I was zoomed!!!`);
            }
          }
        }
      }
    };
  }

我在 angular.json 中添加了这个脚本：

"scripts": [
              "node_modules/quill/dist/quill.min.js",
              "node_modules/chart.js/dist/Chart.min.css",
              "node_modules/chartjs-plugin-zoom/dist/chartjs-plugin-zoom.min.js"
            ]

标签： angularangular-cliprimengpchart