有没有一种方法可以为使用小控件制作的条形图添加水平滚动条

Is there a way to add horizontal scroll bar for a bar chart made using dimplejs?

本文关键字：控件 条形图 滚动条 水平 添加 一种 方法 有没有      更新时间：2023-09-26

我使用小酒窝.js模板制作了一个条形图。这是代码：

<div id="chartContainer">
<script src="/lib/d3.v3.4.8.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.1.2.min.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 1000, 1000);
d3.csv("Device_6_energy.csv", function (data) {
  var myChart = new dimple.chart(svg, data);
  myChart.setBounds(60, 30, 6000, 305)
  var x = myChart.addCategoryAxis("x", "Date");
  x.addOrderRule("Time");
  myChart.addMeasureAxis("y", "Consumption");
  //myChart.width = 6000;
  myChart.addSeries(null, dimple.plot.bar);
  myChart.draw();
});

x轴上的值数量很大。所以，我面临的问题是，只有一些条形图显示。剩下的就断了。

以下是我的.csv文件中时间的格式。

4/3/2015 20:00
4/3/2015 21:00
4/4/2015 1:00
4/4/2015 3:00
4/4/2015 4:00
4/4/2015 5:00

我想知道是否有一种方法可以在图形的底部添加滚动条，以查看所有的滚动条，直到最后。

看起来没有内置的滚动条支持。相反，您可以通过添加overflow属性来使用浏览器本机滚动条。

#chartContainer { overflow-x : scroll ;}
相关文章：