如何按顺序排序x轴

时间:2014-09-19 16:02:35

标签: javascript c3.js

是否可以按顺序排序x轴。当然,c3正在按顺序对x轴进行排序。我的图表如下所示。

jQuery(function($) {
  var chart = c3.generate({
    bindto: '#chart',
    data: {
      x: 'x',
      columns: [
        ['x', 20, 19, 18, 17, 16, 15, 14, 13, 12, 11],
        ['data1', 180, 232, 250, 289, 424, 473, 414, 428, 590, 600]
      ],
      axes: {
        data1: 'y2'
      },
      regions: {
        'data1': [{start: 16, style: 'dashed'}]
      }
    },
    axis: {
      y: {
        show: false
      },
      y2: {
        show: true
      }
    }
  });
});
<link href="http://cdnjs.cloudflare.com/ajax/libs/c3/0.3.0/c3.min.css" rel="stylesheet"/>

<div id="chart"></div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/c3/0.3.0/c3.min.js"></script>

我希望图形x轴与我的x系列完全一样,按降序排列。任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:5)

是的,我想出了如何实现这一目标。只需给出负x值,这样c3将按降序绘制x轴。然后格式化标签,使其显示正值。

jQuery(function($) {
  var chart = c3.generate({
    bindto: '#chart',
    data: {
      x: 'x',
      columns: [
        ['x', -20, -19, -18, -17, -16, -15, -14, -13, -12, -11],
        ['data1', 180, 232, 250, 289, 424, 473, 414, 428, 590, 600]
      ],
      axes: {
        data1: 'y2'
      },
      regions: {
        'data1': [{start: -16, style: 'dashed'}]
      }
    },
    axis: {
      y: {
        show: false
      },
      y2: {
        show: true
      },
      x: {
        tick: {
          format: function (x) {
            return -x;
          }
        }
      }
    }
  });
});
<link href="http://cdnjs.cloudflare.com/ajax/libs/c3/0.3.0/c3.min.css" rel="stylesheet"/>

<div id="chart"></div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/c3/0.3.0/c3.min.js"></script>