在 c3.js 中绘制这些点 xy

Question

我正在尝试在 c3.js 中生成 "scatter plot" 图表。当我想绘制这些点时，我的问题就出现了。 c3.js 中的点与平面中的实际点不匹配。

我做错了什么？

这些是要点：

//x
['data1', 1,2,3,4,5,4,3,2,1],
//y
['data2', 2,3,4,7,8,9,8,7,3]

https://jsfiddle.net/qrqquhvd/

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

Answer 1

您的 (X,Y) 坐标混淆了，请查看 c3 图与您的真实图。在真实图上，您的第一个点是 (1,2)，但在您的 c3 图上，您将其设为 (2,1)。

像这样交换 data1 和 data2 的值...

columns: [
  ['data1', 2,3,4,7,8,9,8,7,3],
  ['data2', 1,2,3,4,5,4,3,2,1]
],

或将 xs 更改为

xs: {
  data2: "data1"
},

在 c3.js 中绘制这些点 xy

plot these points xy in c3.js

javascript

d3.js

c3.js