在chartjs中的条形图上设置滚动答案

【问题标题】：set scroll on bar chart in chartjs在chartjs中的条形图上设置滚动
【发布时间】：2020-08-31 11:34:40
【问题描述】：

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

【问题讨论】：

标签： javascript vue.js chart.js vue-chartjs

【解决方案1】：

您可以将您的canvas 包含在div 中...

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

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

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

请看下面的可运行代码sn-p，看看它是如何工作的。

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, 6, 5, 4, 3, 2, 2, 1],
      backgroundColor: 'rgba(0, 0, 255, 0.2)',
      borderColor: 'rgb(0, 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/chart.js@2.8.0"></script>
<div id="parentDiv">
  <canvas id="myChart" height="500"></canvas>
</div>

【讨论】：