我的图表行不按顺序排列

时间:2017-09-20 15:08:58

标签: javascript d3.js c3.js

我有一个图表,加入所有行的结果应该与图像一样。但目前他们不是。我做错了什么?

enter image description here

https://jsfiddle.net/r2uaq27a/

var chart = c3.generate({
  data: {
    xs: {
      data1: "data2"
    },
    columns: [
      ['data1', 2,3,4,7,8,9,8,7,3],
      ['data2', 1,2,3,4,5,4,3,2,1]
    ]

  }
});

1 个答案:

答案 0 :(得分:2)

xSort的{​​{3}}未记录的data属性设置为false

var chart = c3.generate({
    data: {
        xSort: false,
        x: 'x',
        order: function (i) { console.log(i); },
        columns: [
            ['x', 1,2,3,4,5,4,3,2,1],
            ['data1', 2,3,4,7,8,9,8,7,3]
        ]
    }
});

运行:



var chart = c3.generate({
  data: {
    xs: {
      data1: "data2",
      data3: "data4"
    },
    xSort: false,
    columns: [
      ['data1', 2,3,4,7,8,9,8,7,3],
      ['data2', 1,2,3,4,5,4,3,2,1],
      ['data3', Math.random() * 10,Math.random() * 10,Math.random() * 10,Math.random() * 10,Math.random() * 10,Math.random() * 10],
      ['data4', Math.random() * 10,Math.random() * 10,Math.random() * 10,Math.random() * 10,Math.random() * 10,Math.random() * 10]
    ]

  }
});

#catImage {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 40px;
  top: 0px;
}

<link data-require="c3.js@0.4.11" data-semver="0.4.11" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.css" />
<script data-require="c3.js@0.4.11" data-semver="0.4.11" src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.js"></script>
<script data-require="d3@3.5.17" data-semver="3.5.17" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<div id="chart"></div>
&#13;
&#13;
&#13;