在chart.js中设置条形图上的滚动

问题描述

@H_502_0@我在Chart js中有一个水平条形图，在vuejs框架上有来自服务器的大量数据。如何在我的图表上设置垂直滚动并对其做出良好的响应？ 对于无法理解我的问题，请看这张图片： scrolling data like this picture

解决方法

您可以将canvas放入div ...

<div id="parentDiv">
  <canvas id="myChart" height="500"></canvas>
</div>

...并为父级CSS定义以下div：

#parentDiv {
  height: 120px;
  width: 300px;
  overflow: auto;
}

请查看下面的可运行代码段，并查看其工作原理。

new Chart(document.getElementById('myChart'),{
  type: 'horizontalBar',data: {
    labels: ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O'],datasets: [{
      label: 'My Dataset',data: [15,13,11,10,9,8,7,6,5,4,3,2,1],backgroundColor: 'rgba(0,255,0.2)',borderColor: 'rgb(0,255)',borderWidth: 1
    }]
  },options: {
    responsive: true,legend: {
      display: false
    },title: {
      display: false
    },scales: {
      xAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

#parentDiv {
  height: 120px;
  width: 300px;
  overflow: auto;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div id="parentDiv">
  <canvas id="myChart" height="500"></canvas>
</div>