Question

Here is my output image。我在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>

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

0 个答案: