如何在Highchart中交换Datatable的行/列

huangapple go评论136阅读模式
英文:

How to swap rows / columns of a Datatable in Highchart

问题

我参考了这个案例,它与我的需求非常相似,因为我的数据表与所使用的数据表非常相似。
我的问题不涉及数据表,而涉及Highcharts:我需要在x轴上使用线型而不是列型,将年份显示在x轴上而不是类别,将类别显示为系列。

您知道我如何修改代码吗?

$(document).ready(function() {

  var allSeriesData = [];
  var categories = [];

  var table = $("#example1").DataTable({
    initComplete: function(settings, json) {
      let api = new $.fn.dataTable.Api(settings);

      // 从表头获取x轴的类别:
      var headers = api.columns().header().toArray();
      headers.forEach(function(heading, index) {
        if (index > 0 && index < headers.length - 1) {
          categories.push($(heading).html());
        }
      });

      // 将表行数据作为数字数组获取为系列数据:
      let rows = api.rows().data().toArray();
      rows.forEach(function(row) {
        group = {
          name: '',
          data: []
        };
        row.forEach(function(cell, idx) {
          if (idx == 0) {
            group.name = cell;
          } else if (idx < row.length - 1) {
            group.data.push(parseFloat(cell.replace(/,/g, '')));
          }
        });
        allSeriesData.push(group);
      });  
    }
  });

  var myChart = Highcharts.chart("container", {
    chart: {
      type: "line"
    },
    title: {
      text: "Test Data"
    },
    xAxis: {
      categories: categories
    },
    series: allSeriesData
  });

});
英文:

I refer to that case, which is very similar to my need, as my datatable is very similar to the one used.
My question does not refer to the Datatable but to the Hightcart: I need, using a line type rather than column type, to have the years on the xAxis rather than the categories, and the categories as series.

Would you know how I could amend the code?

`$(document).ready(function() {

  var allSeriesData = [];
  var categories = [];

  var table = $(&quot;#example1&quot;).DataTable({
    initComplete: function(settings, json) {
      let api = new $.fn.dataTable.Api(settings);

      // get the x-axis caregories from the table headings:
      var headers = api.columns().header().toArray();
      headers.forEach(function(heading, index) {
        if (index &gt; 0 &amp;&amp; index &lt; headers.length - 1) {
          categories.push($(heading).html());
        }
      });

      // get the seris data as an array of numbers from the table row data:
      let rows = api.rows().data().toArray();
      rows.forEach(function(row) {
        group = {
          name: &#39;&#39;,
          data: []
        };
        row.forEach(function(cell, idx) {
          if (idx == 0) {
            group.name = cell;
          } else if (idx &lt; row.length - 1) {
            group.data.push(parseFloat(cell.replace(/,/g, &#39;&#39;)));
          }
        });
        allSeriesData.push(group);
      });  
    }
  });

  var myChart = Highcharts.chart(&quot;container&quot;, {
    chart: {
      type: &quot;line&quot;
    },
    title: {
      text: &quot;Test Data&quot;
    },
    xAxis: {
      categories: categories
    },
    series: allSeriesData
  });

});

答案1

得分: 0

我建议按照以下方式使用Highcharts的“数据模块”:

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<div id="container"></div>
<table id="datatable"> ... </table>

JS

Highcharts.chart("container", {
  data: {
    table: datatable,
    complete: function(options) {
      options.series.forEach(series => {
        series.data = series.data.map(function(data) {
          if (typeof data[1] === 'string') {
            return [data[0], parseInt(data[1].replace(/,/g, ''))];
          } else {
            return [data[0], data[1]];
          }
        });
      })
    }
  },
  chart: {
    type: 'line'
  },
  title: {
    text: "测试数据"
  },
  xAxis: {
    type: 'category'
  },
});

演示:
https://jsfiddle.net/BlackLabel/7egbdvfh/

API 参考文档:
https://www.highcharts.com/docs/working-with-data/data-module
https://api.highcharts.com/highcharts/data
https://api.highcharts.com/highcharts/data.complete

英文:

I would recommend using the Highcharts Data module as follows:

HTML

&lt;script src=&quot;https://code.highcharts.com/highcharts.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://code.highcharts.com/modules/data.js&quot;&gt;&lt;/script&gt;
&lt;div id=&quot;container&quot;&gt;&lt;/div&gt;
&lt;table id=&quot;datatable&quot;&gt; ... &lt;/table&gt;

JS

Highcharts.chart(&quot;container&quot;, {
  data: {
    table: datatable,
    complete: function(options) {
      options.series.forEach(series =&gt; {
        series.data = series.data.map(function(data) {
          if (typeof data[1] === &#39;string&#39;) {
            return [data[0], parseInt(data[1].replace(/,/g, &#39;&#39;))];
          } else {
            return [data[0], data[1]];
          }
        });
      })
    }
  },
  chart: {
    type: &quot;line&quot;
  },
  title: {
    text: &quot;Test Data&quot;
  },
  xAxis: {
    type: &#39;category&#39;
  },
});

Demo:
https://jsfiddle.net/BlackLabel/7egbdvfh/

API References:
https://www.highcharts.com/docs/working-with-data/data-module
https://api.highcharts.com/highcharts/data
https://api.highcharts.com/highcharts/data.complete

huangapple
  • 本文由 发表于 2023年7月18日 02:35:02
  • 转载请务必保留本文链接:https://go.coder-hub.com/76707235.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定