Question

我按Chart.Js垂直创建了多个折线图。现在，我想添加垂直滚动，以便通过垂直滚动也可以查看其他图形。

我在文档中没有看到此选项。有什么想法吗？

Answer 1

您要实现哪种垂直滚动？如果要垂直滚动整个图表，为什么不将Chart.JS使用的canvas元素放在div中。例如

<div id="chartContainer">
    <canvas id="myChart"></canvas>
</div>

然后添加CSS，以使画布具有高度，并向容器提供较小的高度/溢出y。

    #chartContainer{ overflow: scroll, height: 300px; }  #myChart{ height: 600px; }

编辑1 上面的代码段对我有用。在没有看到笔的情况下，很难理解图表的具体问题是什么，以及该片段与预期行为的不同之处。

没有笔或更多细节，我只能猜测，但是问题是您已将溢出属性添加到了容器中，但没有滚动发生（即，显示了完整的图表）吗？

如果是这样，则可能只是图表的大小小于容器的溢出边界（可以通过在浏览器中检查画布和容器元素以查看画布是否大于容器来轻松地对其进行测试）。如果是这种情况，并且您希望增加图表的大小（以便在每次查看页面时都强制发生溢出），则可以使用chart.js documentation中的指南进行操作。

以下此类配置的基本示例：

HTML，将滚动容器和图表容器分开，以允许分别调整图表元素的大小：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

<div id="scrollContainer">
  <div id="chartContainer">
    <canvas id="myChart" ></canvas>
  </div>
</div>

CSS，向chartContainer添加大小以调整图表大小：

#scrollContainer{
  height: 300px;
  overflow-y: auto;

}
#chartContainer{
  height: 600px;
  width: 500px;
  position: relative;

}

JavaScript图表对象，其高宽比属性设置为false：

new Chart(document.getElementById("myChart"), {
  type: 'line',
  data: {
    labels: [1500,1600,1700,1800,1900,2001],
    datasets: [{ 
        data: [86,114,106,86,114,106],
        label: "Africa",
        borderColor: "#3e95cd",
        fill: false
      }, { 
        data: [282,350,411,282,350,411],
        label: "Asia",
        borderColor: "#8e5ea2",
        fill: false
      }, { 
        data: [168,170,178,168,170,178],
        label: "Europe",
        borderColor: "#3cba9f",
        fill: false
      }
    ]
  },
  options: {
    maintainAspectRatio: false
  }
});

演示：

new Chart(document.getElementById("myChart"), {
  type: 'line',
  data: {
    labels: [1500,1600,1700,1800,1900,2001],
    datasets: [{ 
      data: [86,114,106,86,114,106],
      label: "Africa",
      borderColor: "#3e95cd",
      fill: false
    }, { 
      data: [282,350,411,282,350,411],
      label: "Asia",
      borderColor: "#8e5ea2",
      fill: false
    }, { 
      data: [168,170,178,168,170,178],
      label: "Europe",
      borderColor: "#3cba9f",
      fill: false
    }
    ]
  },
  options: {
    maintainAspectRatio: false
  }
});

#scrollContainer{
  height: 300px;
  overflow-y: auto;

}
#chartContainer{
  height: 600px;
  width: 500px;
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

<div id="scrollContainer">
  <div id="chartContainer">
    <canvas id="myChart" ></canvas>
  </div>
</div>

如何在Chart.js中为折线图创建垂直滚动？

1 个答案:

演示：