Question

我正在尝试将我的海图导出到其下面的表中。在他们有关Highchart Table的文档中，我只发现this和这个example

我正在尝试使用彩色thead样式化表，但是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.给主题色
2.在图表下方附加平均温度
3.清除“月份”列上方的空白边框描边
4.使表格具有响应性

我似乎找不到任何Highchart表文档。欢迎任何帮助。谢谢

Answer 1

我认为您可以更轻松地使用由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/

Answer 2

要添加到表中的每个项目都需要生成。例如主题背景：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 3

此CSS为我工作，并且反应灵敏！我从this demo获得了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;
}

如何设置Highchart数据表的样式并使其具有响应能力？

3 个答案: