如何使用 Angular 7 缩放 chart.js 中的图表 [英] How to zoom charts in chart.js using angular 7

问题描述

我有一个 line-chart 我想放大它但无法做到.这是我的代码

let ctx = document.getElementById('myChart')让图表 = 新图表(ctx，{类型:'线'，数据: {标签:[红色"，蓝色"，黄色"，绿色"，紫色"，橙色"]，数据集:[{标签:'投票数'，数据:[7, 10, 3, 5, 2, 3],填写:真实，背景颜色:橙色"，边框颜色:'绿色'，pointBorderColor: '红色',点背景颜色:'红色'}]},选项: {插件:{平底锅: {启用:真，模式:'x'，onPan: function () { console.log('我被平移了！！！');}},飞涨: {启用:真，拖动:是的，模式:'x'，onZoom: function () { console.log('我被放大了！！！');}},},响应式:真实，}})

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></脚本><div 类="行"><div class="col d-flex justify-content-center"><canvas id="myChart" style="max-width:95%;height:300px !important;"></canvas></div></div>

我已使用以下 plugin 进行 zooming

解决方案

首先你需要运行 npm install chartjs-plugin-zoom 来安装 npm然后在您的 .ts 文件中执行 import chartjs-plugin-zoom 并像这样编写插件:

 插件:{飞涨: {平底锅: {启用:真，模式:'x'},飞涨: {启用:真，模式:'x'}}},

I have a line-chart and I want to zoom it but unable to do it. Here is my code

let ctx = document.getElementById('myChart')

let chart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
          label: '# of Votes',
          data: [7, 10, 3, 5, 2, 3],
          fill: true,
          backgroundColor: 'orange',
          borderColor: 'green',
          pointBorderColor: 'red',
          pointBackgroundColor: 'red'
        }]
      },
      options: {
        plugins: {
          pan: {
            enabled: true,
            mode: 'x',
            onPan: function () { console.log('I was panned!!!'); }
          },
          zoom: {
            enabled: true,
            drag: true,
            mode: 'x',
            onZoom: function () { console.log('I was zoomed!!!'); }
          },
        },
        responsive: true,
      }
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>

<div class="row">
    <div class="col d-flex justify-content-center">
        <canvas id="myChart" style="max-width:95%;height:300px !important;"></canvas>
    </div>
</div>

I have used the following plugin for zooming

https://github.com/chartjs/chartjs-plugin-zoom#readme

I have also included hammerjs and angular/animations in my project.

Update

Why pan and zoom are unknown to typescript?

// package.json
"chart.js": "^2.7.3",
"chartjs-plugin-zoom": "^0.6.6",

解决方案

First you need to Run npm install chartjs-plugin-zoom to install with npm then do import chartjs-plugin-zoom in your .ts file and write plugin like this :

    plugins: {
      zoom: {
        pan: {
          enabled: true,
          mode: 'x'
        },
        zoom: {
          enabled: true,
          mode: 'x'
        }
      }
    },  

这篇关于如何使用 Angular 7 缩放 chart.js 中的图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！