加载外部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

回答

相关问题