加載外部JSON到ChartJs

我是一個新手，當涉及到使用庫繪製JavaScript圖表/我剛開始試驗Chartjs，我一直無法如何使用getJson或其他任何東西來加載我的JSON對象和更換標籤和數據。我之前使用過HighCharts，與此相比，它非常簡單。另外，我將如何將這些內容加入到Angular的指令中並顯示出來。加載外部JSON到ChartJs

https://jsfiddle.net/0u9Lpttx/1/

的index.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title></title> 
</head> 
<body> 
<div style="width: 100%; height: 100%;"> 
    <canvas id="myChart" style="width: 100%; height: auto;"></canvas> 
</div> 
<div id="js-legend" class="chart-legend"></div> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js"></script> 
<script src="js/chartJsControl.js"></script> 
</body> 
</html>

data.json

[ 
    { 
    "timestamp": "Monday", 
    "original_tweet": "756", 
    "retweets": "345", 
    "shared": "34", 
    "quoted": "14" 
    }, 
    { 
    "timestamp": "Tuesday", 
    "original_tweet": "756", 
    "retweets": "345", 
    "shared": "34", 
    "quoted": "14" 
    }, 
    { 
    "timestamp": "Wednesday", 
    "original_tweet": "756", 
    "retweets": "345", 
    "shared": "34", 
    "quoted": "14" 
    } 
]

chartJsControl.js

var test = []; 
$.getJSON("data.json", function (json) { 
    test.push(json[i].timestamp); 

}); 
var data = { 
    labels: test, 
    datasets: [ 
     { 
      label: "My First dataset", 
      fillColor: "rgba(220,220,220,0.5)", 
      strokeColor: "rgba(220,220,220,0.8)", 
      highlightFill: "rgba(220,220,220,0.75)", 
      highlightStroke: "rgba(220,220,220,1)", 
      data: [65, 59, 80, 81, 56, 55, 40] 
     }, 
     { 
      label: "My Second dataset", 
      fillColor: "rgba(151,187,205,0.5)", 
      strokeColor: "rgba(151,187,205,0.8)", 
      highlightFill: "rgba(151,187,205,0.75)", 
      highlightStroke: "rgba(151,187,205,1)", 
      data: [28, 48, 40, 19, 86, 27, 90] 
     } 
    ] 
}; 


var ctx = document.getElementById("myChart").getContext("2d"); 
ctx.canvas.width = 1000; 
ctx.canvas.height = 800; 

var myChart = new Chart(ctx).Bar(data);

來源

2015-10-06 user2402107

圖表的創建必須在getJSON回調函數內部。只有這樣你才能使用返回的json –

請舉例來顯示 – user2402107

@ user2402107你可以想到角度版本的'chart.js'看看這個答案http://stackoverflow.com/a/28278459/2435473 –

如果你想從data.json你需要做到這一點的回調函數像這樣使用返回JSON：

$.getJSON("data.json", function (json) { 
    // will generate array with ['Monday', 'Tuesday', 'Wednesday'] 
    var labels = json.map(function(item) { 
    return item.timestamp; 
    }); 

    var data = { 
    labels: labels, 
    datasets: [ 
    { 
     label: "My First dataset", 
     fillColor: "rgba(220,220,220,0.5)", 
     strokeColor: "rgba(220,220,220,0.8)", 
     highlightFill: "rgba(220,220,220,0.75)", 
     highlightStroke: "rgba(220,220,220,1)", 
     data: [65, 59, 80, 81, 56, 55, 40] 
    }, 
    { 
     label: "My Second dataset", 
     fillColor: "rgba(151,187,205,0.5)", 
     strokeColor: "rgba(151,187,205,0.8)", 
     highlightFill: "rgba(151,187,205,0.75)", 
     highlightStroke: "rgba(151,187,205,1)", 
     data: [28, 48, 40, 19, 86, 27, 90] 
    } 
    ] 
    }; 

    var ctx = document.getElementById("myChart").getContext("2d"); 
    ctx.canvas.width = 1000; 
    ctx.canvas.height = 800; 

    var myChart = new Chart(ctx).Bar(data); 
});

如果您正在使用角度使用它，我會建議使用角度圖.js版本，請參閱：http://jtblin.github.io/angular-chart.js/

然後您已經有一個角度指令，您可以使用！

來源

2015-10-06 19:07:18

A而之前，我寫了一篇博客文章，比較了不同的角度圖表庫：https：//lingohub.com/blog/2014/06/comparison-angularjs-directives-charts-front-end-app-development/ –

真棒！！謝謝 – user2402107

其實這裏是一個更加棘手的問題。它的工作現在完美了，但我想每天打破每個JSON對象，所以星期一它是一個分組圖表，但現在它只是給了我相同的數據集 – user2402107

加載外部JSON到ChartJs

回答

相關問題