Как оформить таблицу данных Highchart и сделать ее адаптивной?

Question

Я пытаюсь экспортировать свою старшую таблицу в таблицу под ней. В их документации о Highchart Table я нашел только это с этим примером

Я пытаюсь оформить таблицу с помощью цветного тега, но в таблице Highcharts нет тега thead. Это тоже не работает

 // draw category labels
chart.xAxis[0].categories.forEach(function (name, i) {
    renderer.text(
        name,
        cellLeft + cellPadding,
        tableTop + (i + 2) * rowHeight - cellPadding
    )
    .css({
        fontWeight: 'bold',
        backgroundColor: '#aaa'
    })
    .add();
});

То, что я пытаюсь сделать:
1. Раскрась thead
2. Добавьте среднюю температуру ниже графика
3. Сотрите пустую рамку над столбцом Месяц
4. Сделайте таблицу отзывчивой

Кажется, я не могу найти документацию для таблицы Highchart. Любая помощь приветствуется. Спасибо

Answer 1

Каждый элемент, который вы хотите добавить в таблицу, которую нужно сгенерировать. Например thead фон: http://jsfiddle.net/BlackLabel/0behnswa/

Отрывок:

    // Apply thead background:
    renderer.rect(
            cellLeft,
            tableTop + cellPadding,
            colWidth,
            rowHeight
        )
      .attr({
        fill: 'rgba(150, 150, 150, 0.5)'
      })
      .add()

Короче говоря, вам нужно поиграться с кодом, чтобы изменить его так, как вы хотите.

Например, удалить части кода, которые отвечают за создание пустой ячейки: http://jsfiddle.net/BlackLabel/0behnswa/2/

Большая часть - это "отзывчивый" стол. Это SVG, это означает, что вам нужно написать все адаптивные варианты. Сверху вы можете найти опции для настройки:

// user options
var tableTop = 310,
    colWidth = 100,
    tableLeft = 20,
    rowHeight = 20,
    cellPadding = 2.5,
    ...

Это фиксированные числа, их нужно вычислять.

Answer 2

Этот CSS работал для меня, и он отзывчивый! Я получил CSS от этой демонстрации .
Я просто вырезал и вставил его в мой файл CSS и сделал.

.highcharts-data-table table {
    border-collapse: collapse;
    border-spacing: 0;
    background: white;
    min-width: 100%;
    margin-top: 10px;
    font-family: sans-serif;
    font-size: 0.9em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    border: 1px solid silver;
    padding: 0.5em;
}
.highcharts-data-table tr:nth-child(even), .highcharts-data-table thead tr {
    background: #f8f8f8;
}
.highcharts-data-table tr:hover {
    background: #eff;
}
.highcharts-data-table caption {
    border-bottom: none;
    font-size: 1.1em;
    font-weight: bold;
}

Answer 3

Думаю, вам будет проще использовать таблицу, сгенерированную модулем export-data.js.

Это можно назвать так, если вы хотите всегда показывать это:

chart: {
    events: {
        load: function() {
        this.viewData()
      }
    },
    ...
 }

Затем вы можете стилизовать эту таблицу как обычную HTML-таблицу, например:

.highcharts-data-table thead {
  background-color: #aaa;
}

Чтобы найти среднее значение, вы можете рассчитать его на основе значений в таблице html и вызвать его после вызова функции viewData, см. Пример.

function getAverages(rowVals) {
  let averages = ''
  rowVals.forEach(function(arr, i) {
    if (i != 0)
      averages += '<td>' + (arr.reduce(function(a, b) {
        return a + b;
      }) / arr.length).toFixed(1) + '</td>'
  });
  return averages
}

function addHtmlTableAverage() {
  var table = $('.highcharts-data-table table')[0],
    avgVal, sumVal = 0,
    rowCount = table.rows.length - 1,
    rowVals = [
      []
    ]; // minus the header

  for (var i = 1; i < table.rows.length; i++) {
    for (let j = 1; j < table.rows[i].cells.length; j++) {
      if (rowVals[j]) {
        rowVals[j].push(parseFloat(table.rows[i].cells[j].innerHTML))
      } else {
        rowVals.push([parseFloat(table.rows[i].cells[j].innerHTML)])
      }
    }
  }

  $('.highcharts-data-table table > tbody:last')
    .append('<tr class="averages"><td><b>Avg</b></td>' +
      getAverages(rowVals) +
      "</tr>")
}
/**
 * Create the chart
 */
window.chart = Highcharts.chart('container', {

  chart: {
    events: {
      load: function() {
        this.viewData()
        addHtmlTableAverage()
      }
    },
    borderWidth: 2,
    width: 600,
    height: 300
  },

  title: {
    text: 'Average monthly temperatures'
  },

  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },

  yAxis: {
    title: {
      text: 'Temperature (°C)'
    }
  },

  series: [{
    name: 'Tokyo',
    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
  }, {
    name: 'New York',
    data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
  }, {
    name: 'Berlin',
    data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
  }, {
    name: 'London',
    data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
  }]
});

#container {
  margin-top: 20px;
}

.highcharts-data-table thead {
  background-color: #aaa;
}

.averages td {
  background-color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container"></div>

Рабочий пример: http://jsfiddle.net/ewolden/6gh05usq/2/