javascript - 使用 ajax 数据和响应式绘制 Chart.js。几个问题和疑问

Question

我正在使用 Chart.js ( http://www.chartjs.org/docs/ ) 制作图表。

我需要从 Ajax 请求和图表中获取数据以进行响应。

在我的 HTML 代码中，我添加了一个 Canvas ，如下所示:

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

在我的 javascript (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. 请求是否应该异步？

Answer 1

您可以毫无问题地进行异步 AJAX 调用。仅在成功回调触发后才设置图表非常重要。否则，您会遇到未定义 Canvas 上下文的问题。第一次调用 respondCanvas 进行初始设置，而后续调用进行调整大小。

这是对我有用的:

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

如果您的图表上有大型数据集，延迟将使您调整大小的响应更快。