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

Question

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

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

在我的 HTML 代码中，我添加了一个画布，如下所示：

<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. 在谷歌中，绘图速度很快。在 Firefox 中，有时它会挂起一段时间。我的代码有什么问题吗？
4. 请求是否应该是异步的？

Answer 1

您可以毫无问题地进行异步 AJAX 调用。仅在成功回调触发后才设置图表非常重要。否则，您将遇到未定义画布上下文的问题。第一次调用 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();
});

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

Answer 2

你可以在 chart.js 中设置

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

Answer 3

对于那些在 2021 年阅读本文的人：

chart.js v3.xx 更新

遵循v3.xx的更新答案（与v2.xx不向后兼容）

首先，回答4 个初始问题：

1. 图表未在窗口调整大小时调整大小。
2. 有更好的代码来做到这一点吗？我想我重复了很多代码。
3. 在谷歌中，绘图速度很快。在 Firefox 中，有时它会挂起一段时间。我的代码有什么问题吗？
4. 请求是否应该是异步的？

1. 使用当前版本，它应该会自动调整大小，自己尝试运行下面的代码片段并调整浏览器窗口的大小。

2. 诀窍是将您的图表分配给一个变量const myLineChart = ，然后myLineChart.update()在需要时简单地调用。请注意在调用之前以编程方式再次分配标签和数据集myLineChart.update()，否则数据更改不会反映在图表中。

3. 根据我的测试，现在在 Firefox 中应该没问题。

4. 哦，是的，绝对异步（ajax 或带有回调或承诺的 http-request）。

// once the success function of your $.ajax request fires,
// put following code within your success-function

// for now, let's assume sample data
let data2 = {
  "Dates" : [
    "2021-08-02",
    "2021-08-03",
    "2021-08-04",
    "2021-08-05",
    "2021-08-06"
  ],
  "Users": [
    6,
    4,
    3,
    8,
    2
  ]
};

// Draw chart
const ctx = document.querySelector('canvas').getContext('2d');

const myLineChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: data2.Dates,
    datasets: [{
      label: 'Users created',
      data: data2.Users,
      borderColor: 'green',
      backgroundColor: '#404040',
      fill: true,
      animations: false // <-- now plural, instead of "animation" before
    }]
  }
});

// Redraw the chart with an added record
function updateData(event) {
  event.target.disabled = true;

  data2 = {
    "Dates" : [
      "2021-08-02",
      "2021-08-03",
      "2021-08-04",
      "2021-08-05",
      "2021-08-06",
      "2021-08-07"
    ],
    "Users": [
      6,
      4,
      3,
      8,
      2,
      12
    ]
  };

  // assign programmatically the datasets again, otherwise data changes won't show
  myLineChart.data.labels = data2.Dates;
  myLineChart.data.datasets[0].data = data2.Users;

  myLineChart.update();
};

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- gets you the latest version of Chart.js, now at v3.5.0 -->

<button onclick="updateData(event)">add Data</button>

<canvas width="320" height="240"></canvas>

Answer 4

1. 的确
2. 是的，我给你举个例子。
3. 我没有看到任何可能导致问题的东西。除了 window.resize 可能会比您想要的更频繁地触发渲染新图表。
4. 不。（我真的不知道为什么，这更像是巧合。）

编码：

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
 )