时间戳

首页 > 解决方案 > 如何在 c3 分组条形图上固定 Y 轴的位置？

javascript - 如何在 c3 分组条形图上固定 Y 轴的位置？

问题描述

这是我的输出图像。我在 C3 中有一个分组条形图。我有关于数据的 x 轴滚动。滚动 x 轴时，我的 y 轴随之移动。如何修复屏幕上固定的 y 轴位置。由于我必须表示大量数据，所以我希望在 x 轴和 Y 轴上滚动需要固定，并且条形宽度需要与以前相同，因为数据数量增加条形宽度会自动减小。这是我的代码：

<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.3/c3.css" rel="stylesheet">
<!-- Load d3.js and c3.js -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.3/c3.js"></script>
<script type='text/javascript'>

$(function () {
var months = ['Jan 2016', 'Feb2016', 'Feb2016','Jan 2016', 'Feb2016', 'Feb2016'];
var chart = c3.generate({
    data: {
        bindto: '#chart',
        columns: [
            ['data1', 30, 200, 100,30, 200, 100],
            ['data2', 130, 100, 140,30, 200, 100 ]
        ],
        type: 'bar'
    },
   bar: {
  width: {
    ratio: 0.6
  }
},
    axis: { 
    x: {
    type: 'category',
    categories: months,
     label: {
              text: 'open cases',
              position: 'outer-middle'
            }
  },
   y: {
            label: {
              text: 'open cases',
              position: 'outer-middle'
            }
          }


  },

});
});


</script>
<style>
svg
{
width:400px;
}
</style>
</head>
<body>
<div style="width:300px;overflow-x:auto">
<div id="chart" ></div>
</div>
</div>
</body>
</html>

标签： javascriptcssc3.js

解决方案

推荐阅读