制作 X 与 Y 的图表

我在 x 中有一些点，在 y 中有其他点。我正在尝试制作一个如图所示的图表。我希望创建的图表的点可以连接起来。在 c3.js 中，我不知道如何绘制 X 与 Y 的关系。我怎样才能实现像我的照片这样的效果？

https://jsfiddle.net/8tqguqww/

var pointsx=[1,2,3,4,5,4,3,2,1]
var pointsy=[2,3,4,7,8,9,8,7,3]

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
        ]
    },
    point: {
        show: true
    }
});

这种图表的名称是散点图.

因此，您必须指定类型：

type: 'scatter'

并告诉 C3 数据数组对是什么：

xs: {
  data1: "data2"
},
columns: [
  ['data1', 30, 200, 100, 400, 150, 250],
  ['data2', 50, 20, 10, 40, 15, 25]
],

这是更新的小提琴：https://jsfiddle.net/qrqquhvd/

编辑：因为comment在你的问题中我刚刚意识到你有这个要求：“我希望创建的图表的点可以连接起来”。答案很简单：仅使用 C3 是不可能的。您必须使用 D3 代码来完成此操作...更好的想法是放弃 C3 并使用 D3 完成所有操作。