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

结果数据如下所示：

[＆＃39; Viriesi＆＃39;，100]，[＆＃39; Sievietes＆＃39;，0]

此代码生成此类PIE：

但如果我将功能数据更改为：

 var c3_orders_chart = c3.generate({

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

                         ],

                        type : 'pie'
                    },


                    pie: {

                    }
                });

PIE看起来应该如此。

什么可能导致这个问题？数据类型是incorect或什么？我还没有发现任何类似的问题。

提前感谢您的帮助。

Answer 1

这是问题所在。在您的第一个示例中，您有：

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

然后：

columns: [Data],

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

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

这实际上并不是您期望的数组。你需要做的是使字符串解析为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 PIE没有显示有效数据的核心

1 个答案: