使用ajax数据绘制Chart.js并响应。 一些问题和疑问

我正在使用Chart.js（ http://www.chartjs.org/docs/ ）进行制图。

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

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

在我的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. 窗口resize时未调整图表大小。
2. 有没有更好的代码来做到这一点？ 我想我要重复很多代码。
3. 在谷歌，绘图很快。 在firefox中有时会挂起一段时间。 我的代码有什么问题吗？
4. 该请求应该是异步还是不同步？

Answer 1

您可以使异步AJAX调用没问题。 只有在成功回调触发后才设置图表，这一点非常重要。 否则，您将无法定义canvas上下文的问题。 第一次调用respondCanvas进行初始设置，而后续调用进行resize。

这对我有用：

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

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

Answer 2

你可以在chart.js中设置它

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

Answer 3

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 )