c3.js，如何在 c3.load 调用中设置 xs 值

如何解决c3.js，如何在 c3.load 调用中设置 xs 值

我正在尝试编写一个将第二组数据加载到 c3.js 散点图中的函数。功能比较简单。

function loadNextData() {
yName = y[0];
yChart.load({
    xs : { yName : 'x2'},columns: [
    x,y
    ]
});
};

我使用 x 和 y 声明为

var x = [];
var y = [];

这样它们就不会传递给函数。 x 和 y 的第一个元素可以在每次调用之间更改，以便它知道绘图数据是不同的。问题是我似乎找不到设置“yName”的有效方法。任何建议表示赞赏。

产生我想要的情节的代码的完整版本是

<!DOCTYPE html>
<html>
  <head>
    <title>testChart</title>
    <link href="c3/c3.css" rel="stylesheet">
    <link href="styles/style.css" rel="stylesheet">
  </head>
  <body>
    
    <div id="y">
    </div>

  
  </body>
  <!-- read in scripts in javascript -->
  <script src="c3/c3.min.js"></script>
  <script src="d3/d3.min.js"></script>
  <script>
    
    var x = [];
    var y = [];

    x.push('x');
    x.push(1);
    y.push('y');
    y.push(100);

    //define chart (can this be done without drawing it?
    var yChart = c3.generate({
    bindto: '#y',data: {
            xs: { y : 'x' },columns: [
        x,y 
            ],type: 'scatter'
    }
    });
    
    function loadNextData() {
    yName = y[0];
    yChart.load({
        xs : { yName : 'x2'},y
        ]
    });
    };

    //fill data for curve
    let myDate = new Date();
    x.length = 0;
    x.push('x')
    y.length = 0;
    y.push('y');
    for (let i = 0; i < 30; i = i + 1) {
    x.push(i);
    y.push(i);
    }
    x.length = x.length-1;
    y.length = y.length-1;
    //Draw first set of data
    yChart.load({
    xs : {
        y : 'x'
    },y
    ]
    });
    //loadNextData(); //in this case it loads over the old data

    //fill second set of data
    x.length = 0;
    x.push('x2')
    y.length = 0;
    y.push('y2');
    for (let i = 0; i < 30; i = i + 1) {
    x.push(i+0.5);
    y.push(i*i);
    }
    x.length = x.length-1;
    y.length = y.length-1;

    draw second set of data
    yChart.load({
        xs : { y2 : 'x2'},columns: [
            x,y
        ]
    });
    //loadNextData(); // in this case it adds a new set of data
    
  </script>
</html>