Verschachtelte JSON in Highcharts Gestapelt

Ich googelte über den verschachtelten JSON für Highcharts stacked percentage column, aber nicht das richtige raus.Verschachtelte JSON in Highcharts Gestapelt

Hier ist der Code, den ich ausprobiert habe, aber nicht die richtige Ausgabe bekommen.

kann mir jemand bei der Sortierung helfen, was passiert?

danke im voraus.

$(function() { 
 
    var processed_json = new Array(); 
 
    $.getJSON('javascripts/data.json', function(data) { 
 
    // Populate series 
 
    for (i = 0; i < data.length; i++){ 
 
     processed_json.push([data[i].key, data[i].value]); 
 
    } 
 
    // draw chart 
 
    $('#container').highcharts({ 
 
     chart: { 
 
     type: "bar" 
 
     }, 
 
     title: { 
 
     text: "Student data" 
 
     }, 
 
     xAxis: { 
 
     type: 'category', 
 
     allowDecimals: false, 
 
     title: { 
 
      text: "" 
 
     } 
 
     }, 
 
     yAxis: { 
 
     title: { 
 
      text: "Scores" 
 
     } 
 
     }, 
 
     plotOptions: { 
 
     column: { 
 
      stacking: 'normal' 
 
     } 
 
     }, 
 
     series: [{ 
 
     name: 'Subjects', 
 
     data: processed_json, 
 
     }] 
 
    }); 
 
    }); 
 
}); 
 

 
// this is how am displaying in data.json 
 

 
[ 
 
    {"key":"john","value":[34,53,45,45,98]}, 
 
    {"key":"Rita","value":[98,34,43,54,66,66]}, 
 
    {"key":"james","value":[91,33,45,65,65,38]}, 
 
    {"key":"jade","value":[98,54,54,45,45,45]}, 
 
    {"key":"lara","value":[23,23,98,23,23,23]} 
 
]

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<div id="container" style="height: 400px"></div>

Quelle

2016-10-07 Riot Zeast Captain

Und wie Ihr Ausgang (processed_json) schaut, bevor Sie es zu Ihrem Diagramm hinzufügen? Haben Sie Zahlen oder Zeichenfolgen in Ihren y-Werten? Sie können versuchen, Ihre Werte zu Int zu analysieren, bevor Sie sie zu Ihrem Array hinzufügen –

danke für Vorschlag @ GrzegorzBlachliński, meine Hintergrund ist CSS/HTML, ich weiß nicht, wie man ein Array übergeben –

Ihre variable processed_json ist nicht in einer Weise formatiert, die Highcharts API verarbeiten kann.

Werfen Sie einen Blick hier: http://jsfiddle.net/jo8foxtz/

Hier ist der Code:

$(function() { 
 

 
    var processed_json = new Array(); 
 
    
 
    data = [{ 
 
    "key": "john", 
 
    "value": [34, 53, 45, 45, 98] 
 
    }, { 
 
    "key": "Rita", 
 
    "value": [98, 34, 43, 54, 66, 66] 
 
    }, { 
 
    "key": "james", 
 
    "value": [91, 33, 45, 65, 65, 38] 
 
    }, { 
 
    "key": "jade", 
 
    "value": [98, 54, 54, 45, 45, 45] 
 
    }, { 
 
    "key": "lara", 
 
    "value": [23, 23, 98, 23, 23, 23] 
 
    }]; 
 

 
    for (i = 0; i < data.length; i++) { 
 
    var item = {}; 
 
    item["name"] = data[i].key; 
 
    item["data"] = data[i].value; 
 
    processed_json.push(item); 
 
    } 
 

 

 
    $('#container').highcharts({ 
 
    chart: { 
 
     type: 'bar' 
 
    }, 
 
    title: { 
 
     text: 'Student data' 
 
    }, 
 
    xAxis: { 
 
     type: 'category', 
 
     allowDecimals: false, 
 
     title: { 
 
     text: "" 
 
     } 
 
    }, 
 
    yAxis: { 
 
     min: 0, 
 
     title: { 
 
     text: 'Scores' 
 
     } 
 
    }, 
 
    tooltip: { 
 
     pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>', 
 
     shared: true 
 
    }, 
 
    plotOptions: { 
 
     column: { 
 
     stacking: 'percent' 
 
     } 
 
    }, 
 
    series: processed_json 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 

 
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Quelle

2016-10-07 11:07:13

Dank Dhruvan Ganesh, aber ich möchte anrufen die 'json'-datei von außen, kannst du mir die einzigen codes schicken, die in' html' und 'json' stehen sollen. @CSKAdmin –

Ich habe darauf hingewiesen, wo Sie von den API-Dokumenten abweichen, von denen ich glaube, dass sie Ihre Frage beantworten. Wenn Sie auf JSON über eine externe API zugreifen möchten, versuchen Sie JSONP oder CORS. Wenn Sie intern gehostete Dokumente haben möchten, versuchen Sie jQuery.getJSON. Wenn Sie den Code in HTML verwenden möchten, verwenden Sie

Verwandte Themen

Verschachtelte JSON in Highcharts Gestapelt

Antwort

Verwandte Themen