Highchartsのネストされたjsonがスタックされました

Highcharts stacked percentage columnのネストされたjsonについては、私はグーグルでグーグルで調べました。Highchartsのネストされたjsonがスタックされました

私が試したコードですが、適切な出力が得られません。

誰でも私の間違いを分類する際に助けてくれますか？

ありがとうございます。

$(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>

出典

2016-10-07 Riot Zeast Captain

そして、あなたはあなたのチャートに追加される前に（processed_json）あなたの出力がどのように見えますか？数字や文字列がy値にありますか？配列に値を追加する前に値を解析してみてください –

提案が@GrzegorzBlachlińskiありがとうございました。私の背景はCSS/HTMLです。配列を渡す方法がわかりません –

あなたの変数processed_jsonはHighcharts APIが処理できるような方法でフォーマットされていません。

はこちらをご覧： http://jsfiddle.net/jo8foxtz/

ここでは、コードです：

$(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>

出典

2016-10-07 11:07:13

Dhruvan Ganeshありがとうございます。外部からの 'json'ファイルは、' html'と 'json'にあるべき唯一のコードを私に送ることができます。 @CSKAdmin –

私はあなたの質問に答えると思われるAPIドキュメントから逸脱していた場所を指摘しました。外部APIを使用してJSONにアクセスする場合は、JSONPまたはCORSを試してください。内部的にホストされているドキュメントを使用したい場合は、jQuery.getJSONを試してください。 HTMLのコードに

Highchartsのネストされたjsonがスタックされました

答えて

関連する問題