时间戳

首页 > 解决方案 > 在 DataTable 中显示顶点图表

javascript - 在 DataTable 中显示顶点图表

问题描述

我正在努力在数据表中添加图表。我正在使用 Apex 图表和 DataTable jquery 插件。

我收到以下消息“错误：找不到元素 apexcharts.min.js:14”。我想是由于 Apex 呈现图表时 id="apex-mixed-2 尚不可用，但我找不到解决方案。

到目前为止，我想为所有数据行添加相同的图表。

数据表代码

    $(document).ready(function() {
    "use strict";
    $("#products-datatable").DataTable({
        ajax:{url: "../assets/data/jsdata.json",dataSrc:""},
        columns: [
            {
                "data": "Url",
                "render": function(data, type, row) {
                    return '<img src="'+data+'" alt="table-user" class="mr-2 rounded-circle" style="height: 70px;"/>';
                }
            },       
            { "data": "Customer" },
            { "data": "Phone" },
            { "data": "Balance" },
            { "data": "Orders" },
            { "data": "Last Order" },
            { "data": "Status" }
            {
                "data": "Graph",
                "render": function(data, type, row, meta) {
                    return ' <div id="apex-mixed-2"</div>';
                }
            }            
        ]
    })
});

一个简单的 Apex 图表

   var options = {
      series: [{
        name: "Desktops",
        data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
    }],
      chart: {
      height: 350,
      type: 'line',
      zoom: {
        enabled: false
      }
    },
    dataLabels: {
      enabled: false
    },
    stroke: {
      curve: 'straight'
    },
    title: {
      text: 'Product Trends by Month',
      align: 'left'
    },
    grid: {
      row: {
        colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
        opacity: 0.5
      },
    },
    xaxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
    }
    };

    var chart = new ApexCharts(document.querySelector("#apex-mixed-2"), options);
    chart.render();

标签： javascriptjquerychartsdatatableapexcharts

解决方案

要在 Datatables 发出的加载内容的 AJAX 请求完成后执行代码，请使用该drawCallback属性。

$('#products-datatable').DataTable({
  ajax: {
    url: '../assets/data/jsdata.json',
    dataSrc: ''
  },
  drawCallback: () => {
    // call your chart initialisation code here...
  }, 
  columns: [
    {
      data: 'Url',
      render: data => `<img src='${data}' alt='table-user' class='mr-2 rounded-circle' style='height: 70px;'/>`
    },       
    { data: 'Customer' },
    { data: 'Phone' },
    { data: 'Balance' },
    { data: 'Orders' },
    { data: 'Last Order' },
    { data: 'Status' }
    {
      data: 'Graph',
      render: () => ' <div id="apex-mixed-2"></div>'
    }            
  ]
})

推荐阅读