Нарисуйте Chart.js с данными ajax и реагируйте. Несколько проблем и вопросов

Question

Я использую Chart.js (http://www.chartjs.org/docs/) для создания диаграмм.

Мне нужно получить данные из запроса Ajax и диаграммы, чтобы быть отзывчивыми.

В моем HTML код, который я добавил холст следующим образом:

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

И в моем яваскрипта коде (JQuery) У меня есть:

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 } 
); 

}); 

ПРОБЛЕМЫ

1. Диаграмма не изменяется при изменении размера окна.

2. Есть ли лучший код для этого? Я думаю, что повторяю много кода.

3. В Google рисунок выполняется быстро. В firefox иногда он висит на некоторое время. Что-то не так с моим кодом?

4. Если запрос был асинхронным или нет?

Спасибо, Miguel

Answer 1

1. Действительно
2. Да, я дам вам пример.
3. Я не вижу ничего, что могло бы вызвать проблему. Кроме того, что window.resize может запускать рендеринг новой диаграммы намного чаще, чем вы хотите.
4. No. (я не знаю, почему, это скорее совпадение.)

Код:

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 
) 

Answer 2

Вы можете сделать асинхронной AJAX не вызывает никаких проблем. Просто важно настроить диаграмму только после срабатывания обратного вызова. В противном случае вы не будете задавать проблемы со своим контекстом canvas. Первый вызов responseCanvas выполняет первоначальную настройку, а последующие вызовы - изменение размера.

Вот что работает для меня:

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(); 
}); 

Если вы хотите, чтобы вставить небольшую задержку между вызовами, вы можете использовать тайм-аут:

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

    GetChartData(); 
}); 

Задержка сделает ваши изменения размера более отзывчивыми в случае, если на вашем графике имеется большой набор данных.

Answer 3

вы можете установить, что в chart.js

new Chart(context, { 
    type:"line", 
    labels: data.Dates, 
    datasets: [ 
    { fillColor: #404040, data: data.Users } 
    ] 
    options: { responsive: false } 
});