可滚动的柱状图中，设置label显示在柱状图顶端的外侧

要在可滚动的柱状图中将标签显示在柱状图顶部的外部，您需要使用CSS和JavaScript来实现此目的。以下是实现此目的的步骤：

1. 首先，在HTML中创建一个包含柱状图和标签的容器：

<div class="chart-container">
  <canvas id="myChart"></canvas>
  <div class="chart-labels"></div>
</div>

2. 在CSS中设置容器的高度和宽度，并将标签容器定位在图表容器的顶部：

.chart-container {
  position: relative;
  height: 400px;
  width: 100%;
}

.chart-labels {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

3. 在JavaScript中获取标签容器和图表对象，并将标签内容添加到标签容器中：

var labelsContainer = document.querySelector('.chart-labels');
var chart = new Chart(document.getElementById('myChart'), {
  // your chart configuration
});

chart.data.labels.forEach(function(label, index) {
  var labelElement = document.createElement('div');
  labelElement.classList.add('chart-label');
  labelElement.innerText = label;
  labelsContainer.appendChild(labelElement);
});

4. 最后，在CSS中设置标签样式，使其出现在柱状图的顶部外部：

.chart-label {
  position: relative;
  top: -20px; /* adjust this value to position the label correctly */
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

这些步骤将使标签出现在柱状图的顶部外部，并且可以通过滚动来查看所有标签。