Dessinez un fichier Chart.js avec des données ajax et réactif. Quelques problèmes et questions

Je suis en utilisant Chart.js (http://www.chartjs.org/docs/) pour la cartographie.

J'ai besoin d'obtenir les données à partir d'une requête Ajax, et le diagramme d'être réactif.

Dans mon code HTML, j'ai ajouté une toile comme suit:

<div>
  <canvas id="userscreated" class="plot" data-url="/stats/userscreated"></canvas>
</div>

Et dans mon javascript (JQuery) code j'ai:

var data2;

$.ajax({
  url: $('#userscreated').data('url'),
  async: true,
  dataType: 'json',
  type: "get",
}).done(function (data) {

    data2 = data;

    //Draw chart
    var context = $('#userscreated').get(0).getContext("2d");
    var wrapper = $('#userscreated').parent();
    var width = $('#userscreated').attr('width', $(wrapper).width());

    new Chart(context).Line(
    {
      labels: data.Dates,
      datasets: [
        { fillColor: #404040, data: data.Users }
      ]
    },
    { animation: false }
  );

});

//Redraw the chart with the same data
$(window).resize(function () {

  var context = $('#userscreated').get(0).getContext("2d");
  var wrapper = $('#userscreated').parent();
  var width = $('#userscreated').attr('width', $(wrapper).width());

  new Chart(context).Line(
    {
      labels: data2.Dates,
      datasets: [
        { fillColor: #404040, data: data2.Users }
      ]
    },
    { animation: false }
  );

});

PROBLÈMES

  1. Le graphique n'est pas en cours de redimensionnement de la fenêtre de redimensionnement.
  2. Est-il mieux de code pour faire cela? Je pense que je suis en répétant à beaucoup de code.
  3. Dans Google le dessin est rapide. Dans firefox, parfois il se bloque pendant un certain temps.
    Est quelque chose de mal avec mon code?
  4. La demande doit être asynchrone ou pas?

Merci,
Miguel

source d'informationauteur Miguel Moura

  1. 13

    Vous pouvez faire async appels AJAX pas de problème. Il est juste important que vous configurez le graphique seulement après le succès de rappel des feux. Sinon, vous aurez des problèmes avec votre toile contexte n'est pas définie. Le premier appel à respondCanvas occupe de la configuration initiale, tandis que les autres ne le redimensionnement.

    Voici ce qui fonctionne pour moi:

    var max = 0;
var steps = 10;
var chartData = {};
function respondCanvas() {
var c = $('#summary');
var ctx = c.get(0).getContext("2d");
var container = c.parent();
var $container = $(container);
c.attr('width', $container.width()); //max width
c.attr('height', $container.height()); //max height                   
//Call a function to redraw other content (texts, images etc)
var chart = new Chart(ctx).Line(chartData, {
scaleOverride: true,
scaleSteps: steps,
scaleStepWidth: Math.ceil(max / steps),
scaleStartValue: 0
});
}
var GetChartData = function () {
$.ajax({
url: serviceUri,
method: 'GET',
dataType: 'json',
success: function (d) {
chartData = {
labels: d.AxisLabels,
datasets: [
{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
data: d.DataSets[0]
}
]
};
max = Math.max.apply(Math, d.DataSets[0]);
steps = 10;
respondCanvas();
}
});
};
$(document).ready(function() {
$(window).resize(respondCanvas);
GetChartData();
});

    Si vous souhaitez insérer un petit délai entre les appels, vous pouvez utiliser un timeout:

    $(document).ready(function() {
$(window).resize(setTimeout(respondCanvas, 500));
GetChartData();
});

    Le retard rendre votre redimensionnement plus réactif dans le cas où vous avez un grand jeu de données sur votre graphique.

  2. 3

    vous pouvez définir que dans chart.js

    new Chart(context, {
type:"line",
labels: data.Dates,
datasets: [
{ fillColor: #404040, data: data.Users }
]
options: { responsive: false }
});
  3. 0
    1. En effet
    2. Oui, je vais vous donner un exemple.
    3. Je ne vois rien qui pourrait causer un problème. Sauf que la fenêtre.redimensionner pourrait être de tir de l'affichage d'un nouveau graphique beaucoup plus souvent que vous le souhaitez.
    4. Pas. (Je ne sais pas vraiment pourquoi, c'est plus une coïncidence.)

    Le code:

    window.getVisitCounts = ($canvas) ->
url = Routes.visits_between_project_path($canvas.data('project-id'), {
format: "json",
start: $canvas.data('start'),
end: $canvas.data('end')
})
visits = []
days = []
$.ajax
url: url,
async: false,
dataType: "json",
type: "GET",
success: (data) - >
for point in data.chart.data
visits.push(point.visits)
days.push(point.date)
{
days: days,
visits: visits
}
window.createChartData = (raw) - > {
labels: raw.days,
datasets: [{
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
data: raw.visits,
}]
}
window.setupCanvas = ($canvas, data) - >
newWidth = $canvas.parent().width()
$canvas.prop
width: newWidth
height: 400
options = {
scaleOverride: true,
scaleSteps: 10,
scaleStepWidth: Math.ceil(Math.max.apply(Math, data.datasets[0].data) / 10),
scaleStartValue: 0
}
ctx = $canvas.get(0).getContext("2d")
new Chart(ctx).Line(data, options)
$ - > @canvas = $("#analytics-canvas")
if@ canvas.length != 0@ visits = window.createChartData(window.getVisitCounts(@canvas))
window.setupCanvas(@canvas, @visits)
$(window).on('resizeEnd', - >
setupCanvas(document.canvas, document.visits)
)
$(window).resize - >
if (@resizeTO)
clearTimeout(@resizeTO)
@resizeTO = setTimeout(- >
$(this).trigger "resizeEnd"
500
)