C3.js PIE не отображая corectly с действительными данными

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 

Результат данные выглядят следующим образом:

[ 'vīrieši', 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.

Во-первых, на ваш взгляд, сделать текст действителен в формате 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: {} 
});