Блог

Главная - Вопросы по программированию - Возникли проблемы с возвратом к исходному набору данных с помощью chartjs-плагина-перекрестие при сбросе масштабирования

Возникли проблемы с возвратом к исходному набору данных с помощью chartjs-плагина-перекрестие при сбросе масштабирования

#javascript

Вопрос:

У кого — нибудь была возможность поработать с плагином chartjs-chartjs-плагин-перекрестие? У меня возникли проблемы после того, как я несколько раз увеличил наборы данных, и при нажатии кнопки «сбросить масштаб» я могу уменьшить только последнее действие масштабирования, но я хотел бы вернуться к исходному набору данных до инициализации действия масштабирования. Кто-нибудь знает, как решить эту проблему?

Ниже приведен код в jsfiddle:

https://jsfiddle.net/u0594jed/

 <html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <link rel="stylesheet" href="">
  <script src=https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js></script>
 <script src=https://cdn.jsdelivr.net/npm/chartjs-plugin-crosshair@1.2.0></script>

</head>
<body>

  <canvas id="myChart" width="400" height="400"></canvas>

<script type="text/javascript">




    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
    type: 'line',
      data: {
          labels: ['a','b','c','d','e','f','g','h','i','a','b','c','d','a', 'c','d', 'a'],
          datasets: [{
              label: '# of Votes',
              data: [100,200,400,321,345,1234,456,5675,345,456,678,79,456,345,234,34,345],
              backgroundColor: [
                  'rgba(255, 99, 132, 0.2)'
              ],
              borderColor: [
                  'rgba(255, 99, 132, 1)'
              ],
              borderWidth: 1
          }]
      },
    options: {
        scales: {
              y: {
                  beginAtZero: true
              }
          },
      plugins: {
        tooltip: {
          mode: 'interpolate',
          intersect: false
        },
        crosshair: {
          line: {
            color: '#F66',  // crosshair line color
            width: 1        // crosshair line width
          },
          sync: {
            enabled: true,            // enable trace line syncing with other charts
            group: 1,                 // chart group
            suppressTooltips: false   // suppress tooltips when showing a synced tracer
          },
          zoom: {
            enabled: true,                                      // enable zooming
            zoomboxBackgroundColor: 'rgba(66,133,244,0.2)',     // background color of zoom box 
            zoomboxBorderColor: '#48F',                         // border color of zoom box
            zoomButtonText: 'Reset Zoom',                       // reset zoom button text
            zoomButtonClass: 'reset-zoom',                      // reset zoom button class
          },
          callbacks: {
            beforeZoom: () => function(start, end) {                  // called before zoom, return false to prevent zoom
              return true;
            },
            afterZoom: () => function(start, end) {  
                        // called after zoom
            }
          }
        }
      }
    }
  });


</script>




</body>
</html>
Метки: