javascript - C3.js PIE无法正确显示有效数据

我有简单的功能:

   var Data = $("#orders_data").html();

            var c3_orders_chart = c3.generate({

                bindto: '#c3_orders',
                data: {
                     columns: [ Data

                     ],

                    type : 'pie'
                },


                pie: {

                }
            });

在 View 中:

 <div id="orders_data" style="">
         ['Viriesi', <%= @user_sex_m %>],['Sievietes', <%= @user_sex_w %>]
</div>

在 Controller 中:

 @user_sex_w = user_sexshash['totals'][0].floor.to_s
       @user_sex_m = user_sexshash['totals'][1].floor.to_s

结果数据如下所示:
['Viriesi'，100]，['Sievietes'，0]
这段代码生成这样的PIE:

但是如果我将函数数据更改为:

 var c3_orders_chart = c3.generate({

                    bindto: '#c3_orders',
                    data: {
                         columns: [
                            ['New', 64],
                            ['In Progrees', 36]

                         ],

                        type : 'pie'
                    },


                    pie: {

                    }
                });

PIE看起来应该如此。
什么可能导致此问题？数据类型错误或什么？
我还没有找到任何类似的问题。
在此先感谢您的帮助。

最佳答案

这是问题。在第一个示例中，您具有:

var Data = $("#orders_data").html();

然后:

columns: [Data],

Data是一个字符串，因为您使用.html()方法检索了它。这是文字字符串:

"['Viriesi', 100 ],['Sievietes', 0]"

这实际上不是您所期望的数组。您需要做的是使该字符串可解析的JSON。

首先，在您的 View 中，使文本成为有效的JSON(使用双引号，并将两列包装在数组中):

<div id="orders_data" style="">
    [["Viriesi", <%= @user_sex_m %>], ["Sievietes", <%= @user_sex_w %>]]
</div>

其次，当您获得Data时，将其解析为JSON:

var Data_string = $("#orders_data").html();
var Data_columns = JSON.parse(Data_string);

然后在图表中使用已解析的Data_columns:

var c3_orders_chart = c3.generate({
    bindto: '#c3_orders',
    data: {
        columns: Data_columns,
        type : 'pie'
    },
    pie: {}
});