尝试通过 ajax 和 php 使用 chart.js 加载图表

Source 发表于 Dev

来源

我创建了一个 php 页面，如果在浏览器中加载图表，该页面将正常工作。

        <!DOCTYPE html>
    <html lang="en">
    <head>
        <title></title>
        <meta charset="utf-8" />


        <link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
        <link rel="stylesheet" type="text/css" href="css/layout.css" />
        <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui.min.js"></script>
        <script src="https://www.chartjs.org/dist/2.9.3/Chart.min.js"></script>

    </head>
    <body>
 <div id="dashboard_pie_pop_cont"><canvas id="dashboard_graph_quantity_enquiries_salespeople"</canvas</div>
 <script>
        var enquiriesquantitysalespeople = {
            type: 'doughnut',
            data: {
                datasets: [{
                    data: [6,1,],
                    backgroundColor: ["#2585fe", "#71b0ff", "#29bb52", "#497956", "#fcb858", "#f8cd90"],
                    borderWidth: 0,
                }],
                labels: ['Lee Davies','Lee Davies']
            },
            options: {
                responsive: true,
                legend: {
                    position: 'right',
                    textDirection: 'rtl',
                    labels: {
                        boxWidth: 14,
                        fontSize: 14,
                        fontColor: "#000",
                        fontFamily: 'proxima-nova',
                    }
                },
                animation: {
                    animateScale: true,
                    animateRotate: true
                }
                
            }
        };
    window.onload = function() {
        var enquiriesquantitysalespeople_chart = document.getElementById('dashboard_graph_quantity_enquiries_salespeople').getContext('2d');
        window.myDoughnut = new Chart(enquiriesquantitysalespeople_chart, enquiriesquantitysalespeople);};
   </script>
   <body></html>

所以当这个页面加载时它工作正常。但是如果我通过ajax调用它。然后它只是空白，图形不显示。

这是ajax代码

$.ajax({
    type    : 'POST',
    //dataType : 'json',
    url     : '//'+base_url+'/ajax2/dashboard-pie.php',
    success : function(data) {
        $('#dashboard_graph_pop_cont').html(data);
    }
});

还有容器

        <div id="dashboard_graph_pop_cont">
            
        </div>

如果我将data变量替换为一些测试文本，$('#dashboard_graph_pop_cont').html('test');则容器加载得很好，例如，“test”将出现在容器中。这意味着有一些原因 javascript 不会在 ajax 中运行。

我究竟做错了什么？

控制台日志返回

<html lang="en">
<head>
    <title></title>
    <meta charset="utf-8" />


    <link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="css/layout.css" />
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script src="https://www.chartjs.org/dist/2.9.3/Chart.min.js"></script>

</head>


    <body>
   <div id="dashboard_pie_pop_cont"><canvas id="dashboard_graph_quantity_enquiries_salespeople"></canvas></div>
      <script>
        
         var enquiriesquantitysalespeople = {
            type: 'doughnut',
            data: {
                datasets: [{
                    data: [6,1,],
                    backgroundColor: ["#2585fe", "#71b0ff", "#29bb52", "#497956", "#fcb858", "#f8cd90"],
                    borderWidth: 0,
                }],
                labels: ['Lee Davies','Lee Davies']
            },
            options: {
                responsive: true,
                legend: {
                    position: 'right',
                    textDirection: 'rtl',
                    labels: {
                        boxWidth: 14,
                        fontSize: 14,
                        fontColor: "#000",
                        fontFamily: 'proxima-nova',
                    }
                },
                animation: {
                    animateScale: true,
                    animateRotate: true
                }
                
            }
        };window.onload = function() {
        var enquiriesquantitysalespeople_chart = document.getElementById('dashboard_graph_quantity_enquiries_salespeople').getContext('2d');
        window.myDoughnut = new Chart(enquiriesquantitysalespeople_chart, enquiriesquantitysalespeople);};</script><body></html> scripts.js:4054:12

编辑

下面是我们调用 AJAX 的方式：

$.ajax({
    type    : 'POST',
    dataType : 'json',
    url     : '//'+base_url+'/ajax2/dashboard-pie.php',
    data    : 'col_action='+col_action+'&type='+type+'&chart='+chart,
    success : function(data) {
        console.log("data", data);
        $('#dashboard_graph_pop_cont').append('<div id="dashboard_pie_pop_cont" style="width: 100%; height: 100px"></div>');
        $('#dashboard_pie_pop_cont')
            .empty()
            .append(
            $('<canvas/>', {
                id: 'dashboard_graph_quantity_enquiries_salespeople'
            })
        );
                
    var enquiriesquantitysalespeople_chart = document.getElementById('dashboard_graph_quantity_enquiries_salespeople').getContext('2d');
    window.myDoughnut = new Chart(enquiriesquantitysalespeople_chart, data);            
    }
});

并且dashboard-pie.php 有：

header('Content-type: application/json');

$data = [
  'type' => 'doughnut',
  'data' => [
    'datasets'=> [[
      'data'=> [6, 1],
      'backgroundColor' => ["#2585fe", "#71b0ff", "#29bb52", "#497956", "#fcb858", "#f8cd90"],
      'borderWidth'=> 0,
    ]],
    'labels'=> ['Lee Davies','Lee Davies']
  ],
  'options'=> [
    'responsive'=> true,
    'legend'=> [
      'position'=> 'right',
      'textDirection'=> 'rtl',
      'labels'=> [
        'boxWidth'=> 14,
        'fontSize'=> 14,
        'fontColor'=> "#000",
        'fontFamily'=> 'proxima-nova',
      ]
    ],
    'animation'=> [
      'animateScale'=> true,
      'animateRotate'=> true
    ]
  ]
];

echo json_encode($data);

克里斯托·莱特拉斯

这不是 jQuery 的html用途。您不应该使用方法加载包括脚本在内的整个 HTML 页面html；这是一个很大的安全问题，这就是为什么很可能不会以这种方式工作的原因。

相反，您应该加载主页所需的所有库并使用 AJAX 获取，仅获取图表所需的数据。然后使用该数据在页面内生成/绘制/附加图表。

例如使用您的代码：

$.ajax({
    type    : 'POST',
    url     : `//${base_url}/ajax2/dashboard-pie-json-data.php`,
    success : function(data) {
        var enquiriesquantitysalespeople = data;
        // Return just the data needed for the chart using JSON.
        // For example, enquiriesquantitysalespeople should contain data such as:
        // {
        //    type: 'doughnut',
        //    data: {
        //        datasets: [{...}],
        //        labels: ['Lee Davies','Lee Davies']
        //    },
        //    options: {
        //        responsive: true,
        //        ...
        //    }
        //    ...
        // }

        // Then get the 2D context of element you want to render the chart
        var enquiriesquantitysalespeople_chart = document
            .getElementById('dashboard_graph_quantity_enquiries_salespeople')
            .getContext('2d');

        // And create the chart using the data you just fetched to the 2D context
        window.myDoughnut = new Chart(
            enquiriesquantitysalespeople_chart,
            enquiriesquantitysalespeople
        );
    }
});

使用 PHP 返回示例数据

<?php

header('Content-type: application/json');

$data = [
  'type' => 'doughnut',
  'data' => [
    'datasets'=> [[
      'data'=> [6, 1],
      'backgroundColor' => ["#2585fe", "#71b0ff", "#29bb52", "#497956", "#fcb858", "#f8cd90"],
      'borderWidth'=> 0,
    ]],
    'labels'=> ['Lee Davies','Lee Davies']
  ],
  'options'=> [
    'responsive'=> true,
    'legend'=> [
      'position'=> 'right',
      'textDirection'=> 'rtl',
      'labels'=> [
        'boxWidth'=> 14,
        'fontSize'=> 14,
        'fontColor'=> "#000",
        'fontFamily'=> 'proxima-nova',
      ]
    ],
    'animation'=> [
      'animateScale'=> true,
      'animateRotate'=> true
    ]
  ]
];

echo json_encode($data);

在我们点击加载按钮后，每次 AJAX 调用完成时，此代码片段将发出 AJAX 请求并动态创建画布元素。

运行它以查看它的运行情况：

document.getElementById('load').addEventListener('click', function() {
  $.ajax({
    type: 'POST',
    dataType : 'json',
    url: 'https://zikro.gr/dbg/so/65660138/data.php',
    success : function(data) {
      // console.log('Got AJAX data', data);
      $('#dashboard_pie_pop_cont')
        .empty()
        .append(
          $('<canvas/>', {
            id: 'dashboard_graph_quantity_enquiries_salespeople'
          })
        );

      var enquiriesquantitysalespeople_chart = 
        document
          .getElementById('dashboard_graph_quantity_enquiries_salespeople')
          .getContext('2d');

      window.myDoughnut = new Chart(
        enquiriesquantitysalespeople_chart,
        data
      );
    }
  });
});

<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="https://www.chartjs.org/dist/2.9.3/Chart.min.js"></script>

<button id="load">Load AJAX Chart</button>
<div id="dashboard_pie_pop_cont" style="width: 100%; height: 100px"></div>

iFrame 解决方案

此外，另一种选择是在iFrame 中加载图表页面，而根本不进行 AJAX 调用。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2021-08-19

我来说两句

0 条评论

登录后参与评论

上一篇：由于数组（Vue + Vuetify <v-data-table>），搜索不起作用