Загрузка внешнего 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 –

Если вы хотите использовать возвращаемый JSON из data.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/ –

awesome !! ! спасибо – user2402107

На самом деле, это более сложный вопрос. Теперь он работает отлично, но я хочу сломать каждый json-объект в день, так что в понедельник это сгруппированный график, но сейчас он просто дает мне тот же набор данных – user2402107

Загрузка внешнего JSON в ChartJs

ответ

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