如何使用 HighCharts 在 Y 轴上显示数据表的列标题？答案

【问题标题】：How to display column headers in Y axis for a Datatable using HighCharts?如何使用 HighCharts 在 Y 轴上显示数据表的列标题？
【发布时间】：2022-12-01 10:57:39
【问题描述】：

我正在使用数据表和 HighCharts。请在下面查看我的代码。我不确定如何显示 Y 轴上显示年份的条形图。我在下面添加了一张图片来展示它的样子。我是 HighCharts 的新手，所以我不确定所有的功能。谢谢。我怎样才能让图表像这样显示？我想要 Y 轴上的年份。谢谢。

http://live.datatables.net/febayaxa/1/edit



    $(document).ready(function() {
        var table = $("#example1").DataTable();
        var salary = getSalaries(table);
     
        // Declare axis for the column graph
        var axis = {
            id: "salary",
            min: 0,
            title: {
                text: "Number"
            }
        };
     
        // Declare inital series with the values from the getSalaries function
        var series = {
            name: "Overall",
            data: Object.values(salary)
        };
     
        var myChart = Highcharts.chart("container", {
            chart: {
                type: "column"
            },
            title: {
                text: "Test Data"
            },
            xAxis: {
                categories: Object.keys(salary)
            },
            yAxis: axis,
            series: [series]
        });
     
        // On draw, get updated salaries and refresh axis and series
        table.on("draw", function() {
            salary = getSalaries(table);
            myChart.axes[0].categories = Object.keys(salary);
            myChart.series[0].setData(Object.values(salary));
        });
    });
     
    function getSalaries(table) {
        var salaryCounts = {};
        var salary = {};
         
        // Get the row indexes for the rows displayed under the current search
        var indexes = table
            .rows({ search: "applied" })
            .indexes()
            .toArray();
         
        // For each row, extract the office and add the salary to the array
        for (var i = 0; i < indexes.length; i++) {
            var office = table.cell(indexes[i], 0).data();
            if (salaryCounts[office] === undefined) {
                salaryCounts[office] = [+table.cell(indexes[i], 1).data().replace(/[^0-9.]/g, "")];
            }
            else {
                salaryCounts[office].push(+table.cell(indexes[i], 1).data().replace(/[^0-9.]/g, ""));
            }
        }
         
        // Extract the office names that are present in the table
        var keys = Object.keys(salaryCounts);
         
        // For each office work out the average salary
        for (var i = 0; i < keys.length; i++) {
            var length = salaryCounts[keys[i]].length;
            var total = salaryCounts[keys[i]].reduce((a, b) => a + b, 0);
            salary[keys[i]] = total / length;
        }
     
        return salary;
    };
    <!DOCTYPE html>
    <html>
      <head>
        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

        <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
        <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
     <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

        <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
        <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
        <meta charset=utf-8 />

      </head>
      <body>

    <div id="container" style=" width: 100%; height: 400px;"></div>

    <div class="container">
    <table id="example1" class="display nowrap" width="100%"><thead>
    <tr><th>Year</th><th>2012</th><th>2013</th><th>2014</th><th>2015</th><th>2016</th><th>2017</th><th>2018</th><th>2019</th><th>2020</th><th>2021</th></tr></thead>
      
     <tr ><td> Data</td><td>3,823</td><td>3,823</td><td>3,954</td><td>3,959</td><td>3,955</td><td>3,956</td><td>3,843</td><td>3,699</td><td>3,472</td><td>3,551</td></tr></tbody> 
      </tbody></table>

【问题讨论】：

标签： javascript html highcharts datatables

【解决方案1】：

我假设你的意思是x轴（水平轴）当您说您想要使用数据表中的年份（来自表标题）作为图表中每个条形图的标签时。

您可以使用 DataTables API 和一些 jQuery 访问这些表标题。

使用它来获取表格标题元素的数组：

api.columns().header()

然后使用 $(element).html() 从每个标题中获取标签（年份）。

问题中的示例中有很多代码似乎与您要创建的图表无关，因此在下面的示例中，我删除了所有这些代码。如果需要，您可以将其放回原位。

$(document).ready(function() {

  var tableData = [];
  var tableCategories = []

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

      // get the seris data as an array of numbers from the table row data:
      api.rows().data().toArray()[0].forEach(function(element, index) {
        if (index > 0) {
          tableData.push(parseFloat(element.replace(/,/g, '')));
        }
      });

      // get the x-axis caregories from the table headings:
      api.columns().header().toArray().forEach(function(element, index) {
        if (index > 0) {
          tableCategories.push($(element).html());
        }
      });

        
    }
  });

  var myChart = Highcharts.chart("container", {
    chart: {
      type: "column"
    },
    title: {
      text: "Test Data"
    },
    xAxis: {
      categories: tableCategories
    },
    series: [{
      data: tableData
    }]
  });

});

<!DOCTYPE html>
<html>

<head>
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

  <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
  <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

  <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
  <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <meta charset=utf-8 />

</head>

<body>

  <div id="container" style=" width: 100%; height: 400px;"></div>

  <div class="container">
    <table id="example1" class="display nowrap" width="100%">
      <thead>
        <tr>
          <th>Year</th>
          <th>2012</th>
          <th>2013</th>
          <th>2014</th>
          <th>2015</th>
          <th>2016</th>
          <th>2017</th>
          <th>2018</th>
          <th>2019</th>
          <th>2020</th>
          <th>2021</th>
        </tr>
      </thead>

      <tr>
        <td> Data</td>
        <td>3,823</td>
        <td>3,823</td>
        <td>3,954</td>
        <td>3,959</td>
        <td>3,955</td>
        <td>3,956</td>
        <td>3,843</td>
        <td>3,699</td>
        <td>3,472</td>
        <td>3,551</td>
      </tr>
      </tbody>



      </tbody>

    </table>

输出如下所示：

如果您确实希望年份标签显示在 y 轴上（使用水平条而不是垂直条），那么您可以通过更改图表的这一部分来更改图表类型...

chart: { type: "column" },

对此：

chart: { type: "bar" },

【讨论】：