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

Question

我有简单的功能:

   var Data = $("#orders_data").html(); 
                         
            var c3_orders_chart = c3.generate({

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

                     ],
                  
                    type : 'pie'
                },


                pie: {
                   
                }
            });

可见:

 <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 看起来应该如此。

什么可能导致这个问题？数据类型不正确还是什么？ 我还没有找到任何类似的问题。

在此先感谢您的帮助。

Answer 1

问题来了。在您的第一个示例中，您有:

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

然后:

columns: [Data],

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

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

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

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

<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: {}
});