Question

这是我的输出图像：

我在C3中有一个分组的条形图。我有关于数据的x轴滚动。滚动x轴时，我的y轴随之移动。如何确定屏幕上固定的y轴的位置？由于我必须表示大量数据，因此我想在x轴和Y轴上滚动是固定的，并且条形宽度必须与以前相同，因为随着数据数量的增加，条形宽度会自动减小。

这是我的代码：

$(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'
        }
      }


    },

  });
});

svg {
  width: 400px;
}

<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>


<body>
  <div style="width:300px;overflow-x:auto">
    <div id="chart"></div>
  </div>
</body>

Answer 1

您不仅可以使用c3的缩放行为吗？在这里，使用鼠标滚轮在图表上进行放大/缩小，并通过单击鼠标左键并拖动来移动图表

仅有的其他变化是将svg宽度声明从css移至c3图表声明

$(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'
        }
      }


    },
zoom: {
    enabled: true
},
size: {
   width: 260,
},
  });
});

<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>


<body>
  <div style="width:300px">
    <div id="chart"></div>
  </div>
</body>

C3 js分组了条形图，以解决和解决y轴问题

1 个答案: