javascript - 将 Chart.js 作为 HTML 发送,然后通过 ajax 渲染

标签 javascript ajax laravel chart.js

我想知道是否可以通过 AJAX 方法发送 HTML(包含多个图表)然后渲染它们。我似乎没有太多运气,而且我在网上找不到太多使用这种方法的方法。如果有任何意见,我将不胜感激。

这是我的 AJAX 函数:

  $.ajax({
      url: "/admin/expensereport/getgraphs",
      type: 'GET',
      data: { dateFrom: $("#dateFrom").val(), dateTo:$("#dateTo").val(),
      expenseBuildingType: $("input[name='expenseBuildingType']:checked").val(),
      expenseScheduledType: $("input[name='expenseScheduledType']:checked").val()},
      cache: false,
      success: function(data) {
        $('#graphsDiv').html(data);
      },

这是我的 PHP Laravel 函数,其中包含 3 个图表之一:

$chartCategories = app()->chartjs
                  ->name('chartCategories')
                  ->type('pie')
                  ->size(['width' => 400, 'height' => 200])
                  ->labels(['Label x', 'Label y'])
                  ->datasets([
                      [
                          'backgroundColor' => ['#FF6384', '#36A2EB'],
                          'hoverBackgroundColor' => ['#FF6384', '#36A2EB'],
                          'data' => [69, 59]
                      ]
                  ])
                  ->options([]);


          $view = View::make('partials.CPM.expensereportgraphs', [
                'chartCategories' => $chartCategories,
            ]);

以下是我的观点摘录:

<div class="col-md-6">
    <h4>Top 10 Categories</h4>
    {!! $chartCategories->render() !!}
  </div>

最佳答案

我设法通过采取另一条路线解决了这个问题。我在 html 页面文件中创建了图表,然后通过 AJAX 发送数据。我想这个方法实际上要好得多。

关于javascript - 将 Chart.js 作为 HTML 发送,然后通过 ajax 渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52238419/

相关文章:

javascript - 隐藏 Div 但向上滑动时显示它?

javascript - 如何使用 Jquery AJAX 从 PHP json_encode 读取 JSON 数据

javascript - JQuery Ajax Post 导致 500 Internal Server Error

javascript - Laravel获取图像的文件内容但在生产环境上不起作用

Laravel Eloquent ORM - 如何获取数组中集合的所有属性?

laravel - Elixir 版本控制公共(public)路径

javascript - 输出JSON的javascript中的递归函数

javascript - Angular 翻译:过滤器忽略 namespace

javascript - Vue,火库 : how to display LIVE data after merging collections

javascript - XMLHttpRequest 和 jQuery AJAX 方法之间的响应 header 差异