C3.js PI 无法正确显示有效数据

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>

在控制器中：

 @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]"

这实际上不是您所期望的数组。您需要做的是使该字符串 parse-able JSON.

首先，在您看来，使文本有效 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: {}
});

C3.js PI 无法正确显示有效数据

C3.js PIE not displaying corectly with valid data

javascript

jquery

c3.js