jquery datatable到highcharts

“大家好。我想知道如何动态地从下面的代码中将jataery数据表值传递给高图。像xAxis和2 yAxis这样的变量”。 我应该说有超过3列，但不包括在这里。 mySql将数据提供给php，它返回值作为数据表的json格式。 当然，Highcharts可以使用此信息而无需再次调用mysql。

  Date Generated kW Efficiency %    $(document).ready(function() { var table = $('#chartdaytable').dataTable({ "bProcessing": true, "sAjaxSource": "../../php/ChartDayTable.php", "bPaginate":true, "sPaginationType":"full_numbers", "iDisplayLength": 25, "aaSorting": [[ 0, "desc" ]], "aoColumns": [ { mData: 'date' } , { mData: 'day_energy' }, { mData: 'efficiency' } ] }); $('#chartgen').highcharts({ data: { table: 'chartdaytable', endColumn: 2, }, chart: { zoomType: 'xy', }, xAxis: [{ //categories: 'some data', }], series: [{ name: 'Generation', type: 'column', yAxis: 0, //data: 'some data', }, { name: 'Efficiency', type: 'spline', yAxis: 1, //data: 'some data', }] }); });  

Answer 1

这是静态数据表的示例。 这将为开始提供一些想法。 检查片段中的评论，如果有疑问请评论

 $(document).ready(function() { var table = $('#example').DataTable(); var data = table.rows().data(); var categories = []; //creating array for storing browser type in array. for (var i = 0; i < data.length; i++) { categories.push(data[i][0]) } var count = {}; //creating object for getting categories with count categories.forEach(function(i) { count[i] = (count[i] || 0) + 1; }); //console.log(count) var series_data = []; //creating empty array for highcharts series data var categores = []; //creating empty array for highcharts categories Object.keys(count).map(function(item, key) { series_data.push(count[item]); categores.push(item) }); //console.log(series_data) plotChart(series_data, categores) }); function plotChart(series_data, categores) { Highcharts.chart('container', { chart: { type: 'column' }, xAxis: { categories: categores }, yAxis: { title: { text: 'Count' } }, series: [{ name: 'Browser', data: series_data }] }); } 

小提琴演示

更新这是服务器端示例，它在数据表中加载数据后填充图表。

JS代码

 $(document).ready(function() { var url = 'http://www.json-generator.com/api/json/get/cbEfqLwFaq?indent=2'; var table = $('#example').DataTable({ 'processing': true, 'serverSide': true, 'ajax': { type: 'POST', 'url': url, 'data': function(d) { console.log(d.order); return JSON.stringify(d); } }, "initComplete": function(settings, json) { data = table.rows().data() var categories = []; //creating array for storing browser type in array. var series_data = []; for (var i = 0; i < data.length; i++) { categories.push(data[i][0]) series_data.push(Number([data[i][5].match(/\d/g).join("")])) } plotChart(categories, series_data) } }); // // $('#reload').click(function(e) { table.ajax.reload(); }); // }); function plotChart(categories, series_data) { Highcharts.chart('container', { chart: { type: 'column' }, xAxis: { categories: categories }, yAxis: { title: { text: 'Count' } }, series: [{ name: 'person', data: series_data }] }); } 

HTML

 reload table First Name 
   
 
 
 
 
 
First name
 
Last name
 
Position
 
Office
 
Start date
 
Salary
 
 
 
 
 
First name
 
Last name
 
Position
 
Office
 
Start date
 
Salary
 
 
  

小提琴演示