Question

我对javascript并不熟悉。我使用ajax调用加载了jquery数据表，如下所示：

$('#table').dataTable( {
    "processing": true,
    "serverSide": true,
    "ajax": "http://api.mywebsite.com/report",
            "columns": [
        { "data": "date" },
        { "data": "ordernumber" },
        { "data": "totalsales" },
        { "data": "subtotal" }
           ]
} );

我想将dataTable与Google图表一起加载，但我不知道如何将数据对象从上面的dataTable初始化中获取到下面的Google代码，并在每次重新填充数据时触发相同的例程： / p>

google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Date', 'Sales'],
      ['20 Jan - Feb 04',  10340 ],
      ['20 Feb - Mar 05',  23470 ],
      ['20 June - Dec 06',  450 ],
      ['20 Mar - Aug 07',  3030 ]
    ]);

    var options = {
      title: 'Company Performance'
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

    chart.draw(data, options);
  }

我可以在下面替换

     `['Date', 'Sales'],
      ['20 Jan - Feb 04',  10340 ],
      ['20 Feb - Mar 05',  23470 ],
      ['20 June - Dec 06',  450 ],
      ['20 Mar - Aug 07',  3030 ]`

有类似的东西：

dataTable.data[date]

Answer 1

这很容易。我注意到您正在使用dataTables 1.10.x，然后您可以使用API迭代每一行，并构建一个谷歌可视化将使用的数据数组：

$("#buildChart").click(function() {
    var dataArray = [];
    dataArray.push([ 'date', 'totalsales' ]);
    table.rows().data().each(function(value, index) {
        dataArray.push([ value.date, value.totalsales ]);
    });
    drawChart(dataArray);
});

和被调用的drawChart函数非常类似于您的问题：

function drawChart(dataArray) {
    var data = google.visualization.arrayToDataTable(dataArray);
    var options = {
      title: 'dataTables to google visualization'
    };
    var chart = new google.visualization.LineChart(document.getElementById('chart'));
    chart.draw(data, options);
}

enter image description here

使用您的数据查看演示 - ＆gt;的 http://jsfiddle.net/9wvvh8sk/

使用jquery-datatable数据源生成谷歌可视化图表

1 个答案: