将 c3js 图表选项传递给函数

Question

我有几个不同的图表，我正在通过 ajax 使用 c3js 渲染，我目前有很多重复的 ajax 代码，我想减少。

每次 ajax 成功调用都会生成一个 c3js 图表，但显示不同 types/options。有没有办法让我生成一个通用的 c3js 并只传递选项？

$.ajax({
    url: url,
    data: {'chart': chart, 'start': start, 'end': end},
    type: 'post',
    dataType: 'json',
    beforeSend: function () {
        //code
    },
    success: function (data) {
        if (data.success) {
            //code                      
            c3.generate({
                bindto: '#chart-data',
                data: {
                    columns: data.active,
                    type: 'area',
                    groups: [data.groups]
                },
                axis: {
                    x: {
                        type: 'category',
                        categories: data.span
                    },
                    y: {
                        label: 'Label'
                    }
                 }
            });
        } else {
            //code
        }
    }
});

使用各种图表数据类型、组、列、轴等重复多次

我想要的：

var chart_options = {bindto: '#chart-data', data:{columns.data.active} //...
function generateChart(param1, param2, param3, chart_options) {
    //do some stuff
    //ajax call from above
    // ....
    // on success:
    // c3.generate(chart_options)
}

然而，当我这样做时，因为 data.success 在函数内部，并且我从函数外部传递列：data.active，我收到 javascript 错误data[i] 列未定义。

谢谢

Answer 1

var chart_options = {bindto: '#chart-data', {data: {type: "area"}} //...}
function generateChart(param1, param2, param3) {
  //do some stuff
  //ajax call from above
  // ....
  // on success:
  // chart_options.data.colums = data.active;
  // chart_options.data.groups = [data.groups];
  // same for axes…
  // c3.generate(chart_options)
}

将 c3js 图表选项传递给函数

Pass c3js chart options to function

javascript

ajax

jquery

d3.js

c3.js