向Chart js条形图添加垂直和水平滚动

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<canvas id="barChart"></canvas>

// 获取Canvas元素
var ctx = document.getElementById('barChart').getContext('2d');

// 创建数据
var data = {
  labels: ['数据1', '数据2', '数据3', '数据4', '数据5', '数据6', '数据7', '数据8', '数据9', '数据10'],
  datasets: [{
    label: '示例数据',
    data: [12, 19, 3, 5, 2, 3, 8, 15, 10, 7],
    backgroundColor: 'rgba(75, 192, 192, 0.2)',
    borderColor: 'rgba(75, 192, 192, 1)',
    borderWidth: 1
  }]
};

// 配置选项
var options = {
  responsive: true,
  maintainAspectRatio: false,
  scales: {
    x: {
      type: 'category',
      maxBarThickness: 50,
      offset: true,
      grid: {
        display: false
      }
    },
    y: {
      beginAtZero: true,
      grid: {
        display: true
      }
    }
  },
  plugins: {
    scrollbar: {
      mode: 'xy'
    }
  }
};

// 创建条形图
var barChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: options
});