Javascript 让Datatables和Sparklines一起玩得很好？

目前，我正在尝试让和软件包一起工作，如下所示：

我意识到我的问题类似于。。。然而，即使在查看了一些代码并将其改编为我自己的代码后，我也只能呈现其中一个。。无论是图表上我的服务器上的数据，还是所有数据丢失时呈现的迷你图，都不能同时显示在一起

这是密码

<table id="table_id" class="display">
    <thead>
        <tr>
            <th>Table Name</th>
            <th>Column Name</th>
            <th>Rule</th>
            <th>Current</th>
            <th>Minimum</th>
            <th>Maximun</th>
            <th>Median</th>
            <th>Mean</th>
            <th>Sparkline</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

---

我非常感谢任何人的反馈/帮助！谢谢❤️

明白了。每次我发布stackoverflow问题时都会发生这种情况，但我想如果我不发布，我会被困几天

无论如何，在阅读了几个小时的文档之后，

aoColumnDefs

是一个选择器，它可以选择表中的整行（如果它已经在HTML中创建了），这在我上面的代码中是错误的。。

aTargets

是您在列的索引中传递的参数，

mRender

是您在向屏幕吐出任何内容之前调用的回调函数（它可以事先修改该特定列的数据）

不同之处在于，我使用

列将代码发送到HTML，然后我将整个列作为附加标记的目标，并将它们发送过来

张贴我的代码，希望这能节省一些人的时间

$('#table_id').DataTable({
                   data:{{ data|safe}},
                    columns: [
                        {data: 'table_name'},
                        {data: 'col_name'},
                        {data: 'rule'},
                        {data: 'current'},
                        {data: 'min'},
                        {data: 'max'},
                        {data: 'median'},
                        {data: 'mean'},
                        {data: 'data'},

                    ],
                    "aoColumnDefs": [
                    {
                        "aTargets": [8],
                        "mRender": function (data, type, full) {
                             // since data is an array of values [1,2,3,4]
                            return '<span class="spark">' + data + '</span>'
                        }
                    }
                ],
               "drawCallback": (oSettings) => {
                   console.log('callback');
                   console.log($('.spark:not(:has(canvas))'))
                  $('.spark:not(:has(canvas))').sparkline('html', {
                      type: 'line',
                      minSpotColor: 'red',
                      maxSpotColor: 'green',
                      spotColor: false
                  });
              }
               });

$（'#table_id'）。数据表({
数据：{data | safe}}，
栏目：[
{data:'表名称'}，
{数据：'col_name'}，
{data:'规则'}，
{数据：'当前'}，
{data:'min'}，
{data:'max'}，
{数据：'中间'}，
{数据：'平均'}，
{data:'data'}，
],
“aoColumnDefs”：[
{
“目标”：[8]，
“mRender”：功能（数据、类型、完整）{
//因为数据是一个值数组[1,2,3,4]
返回“”+数据+“”
}
}
],
“drawCallback”：（oSettings）=>{
log（'callback'）；
log（$（'.spark:not（：has（canvas））））
$（'.spark:not（：has（canvas）））.sparkline（'html'{
键入：“行”，
minSpotColor:'红色'，
maxSpotColor:'绿色'，
专色：假
});
}
});
我发现您的帖子很有帮助，并在-fyi处添加了一个附加问题。谢谢分享这个。。。
 data = { 
      'table_name': cow,
      'col_name' : cow_col,
      'rule' : cow_col,
      ..etc, etc..
      'data4spark: [1,2,3,4]

   }

$('#table_id').DataTable({
                   data:{{ data|safe}},
                    columns: [
                        {data: 'table_name'},
                        {data: 'col_name'},
                        {data: 'rule'},
                        {data: 'current'},
                        {data: 'min'},
                        {data: 'max'},
                        {data: 'median'},
                        {data: 'mean'},
                        {data: 'data'},

                    ],
                    "aoColumnDefs": [
                    {
                        "aTargets": [8],
                        "mRender": function (data, type, full) {
                             // since data is an array of values [1,2,3,4]
                            return '<span class="spark">' + data + '</span>'
                        }
                    }
                ],
               "drawCallback": (oSettings) => {
                   console.log('callback');
                   console.log($('.spark:not(:has(canvas))'))
                  $('.spark:not(:has(canvas))').sparkline('html', {
                      type: 'line',
                      minSpotColor: 'red',
                      maxSpotColor: 'green',
                      spotColor: false
                  });
              }
               });