C3 js分组条形图scolling和修复y轴问题答案

【问题标题】：C3 js grouped bar chart scolling and fixing y axis issueC3 js分组条形图scolling和修复y轴问题
【发布时间】：2018-07-12 07:05:19
【问题描述】：

这是我的输出图像：

我在 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>

【问题讨论】：

标签： javascript jquery css d3.js c3.js

【解决方案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>

【讨论】：

对不起，我想要滚动和宽度需要固定，因为我需要 x 轴标签
它确实会滚动，并且 svg 的宽度是固定的。条的宽度可以是任何你想要的，放大/缩小直到你满意为止。
抱歉，我想要与上述相同的功能，因为如果数据增加，x 轴标签会重叠