В таблице нет столбцов. JSon данные

У меня есть JSON данные в этом форматеВ таблице нет столбцов. JSon данные

[ 
{ 
id: 2, 
nom: "Dell", 
type: "Pc", 
quantity: 78, 
prix: 7800 
}, 
{ 
id: 3, 
nom: "Intel", 
type: "Processor", 
quantity: 45, 
prix: 8000 
}, 
{ 
id: 4, 
nom: "Dell", 
type: "Ecran", 
quantity: 10, 
prix: 2500 
} 
]

и я хочу, чтобы поместить их в диаграмму помощи, пожалуйста, это около 4 дней, и я не могу заставить его работать я хочу понять, почему Google Chart апи не хотят принимать эти данные это мой код

<html> 
<head> 
<!--Load the AJAX API--> 
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript"> 

// Load the Visualization API and the bar package. 
google.charts.load('current', {'packages':['corechart']}); 

// Set a callback to run when the Google Visualization API is loaded. 
google.charts.setOnLoadCallback(drawChart); 

function drawChart() { 
    var jsonData = $.ajax({ 
     url: "http://localhost:8080/get", 
     dataType: "json", 
     async: false 
     }).responseText; 
     console.log(jsonData) 
    // Create our data table out of JSON data loaded from server. 


    var data = new google.visualization.DataTable(jsonData); 

    // Instantiate and draw our chart, passing in some options. 
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
    chart.draw(data, {width: 400, height: 240}); 
} 

</script> 
</head> 

<body> 
<!--Div that will hold the pie chart--> 
<div id="chart_div"></div> 
</body> 
</html>

источник

2016-03-03 Kamel Mili

формат данных должен быть таким:

{ 
    cols: [ 
     {id: 'task', label: 'Task', type: 'string'}, 
     {id: 'hours', label: 'Hours per Day', type: 'number'} 
    ], 
    rows: [ 
     {c:[{v: 'Work'}, {v: 11}]}, 
     {c:[{v: 'Eat'}, {v: 2}]}, 
     {c:[{v: 'Commute'}, {v: 2}]}, 
     {c:[{v: 'Watch TV'}, {v:2}]}, 
     {c:[{v: 'Sleep'}, {v:7, f:'7.000'}]} 
    ] 
}

Посмотрите документацию (https://developers.google.com/chart/interactive/docs/reference#DataTable), и вы увидите, что вам нужно определить столбцы в свойстве cols и данных в свойстве rows.

Так что вам нужно «переформатировать» ваш JSON, чтобы он соответствовал требованиям.

Так что для вашей потребности преобразования, этот код должен работать:

var rows = new Array(); 

for(var i=0;i<jsonData.length;i++) 
{ 
    var jsonRow = jsonData[i]; 
    var row = { 
     c: [ 
      {v: jsonRow.id}, 
      {v: jsonRow.nom}, 
      {v: jsonRow.type}, 
      {v: jsonRow.quantity}, 
      {v: jsonRow.prix}, 
     ] 
    }; 
    rows.push(row); 
} 


var dataFormatted = { 
    cols: [ 
     { id: 'id', label: 'Id' }, 
     { id: 'nom', label: 'Nom' }, 
     { id: 'type', label: 'Type' }, 
     { id: 'quantity', label: 'Quantity' }, 
     { id: 'prix', label: 'Prix' }, 
    ], 
    rows: rows 
} 

var data = new google.visualization.DataTable(dataFormatted);

источник

2016-03-03 09:23:12

как я могу преобразовать его? : '( –

Отредактируйте код, который сгенерирует ваш JSON, чтобы он сгенерировался в правильном формате. –

Могу ли я преобразовать его с помощью javascript? Am использовать весеннюю загрузку в backend, и я не думаю, что буду знать, как их редактировать –

В таблице нет столбцов. JSon данные

ответ

Смежные вопросы