将静态内容添加到 highchart 导出的 pdf 标题中答案

【问题标题】：Add static content into highchart exported pdf header将静态内容添加到 highchart 导出的 pdf 标题中
【发布时间】：2018-07-07 21:13:31
【问题描述】：

我正在使用 highchart 导出选项来下载 pdf，我需要在 highchart 标题中添加一些静态内容，但我没有完美的解决方案，有没有人帮帮我？

Please click here for the reference image

我需要将上图的内容添加到导出的pdf表头左侧，怎么做呢？有什么帮助吗？

【问题讨论】：

标签： javascript jquery pdf highcharts

【解决方案1】：

我更新了add-data-table 官方示例添加静态表。在这里，我为第一列和第二列传递了两个数组 td1 和 td2

var td1 = ['text1', 'text2', 'text3'];
var td2 = ['text12', 'text22', 'text32'];

使用渲染创建表格的代码

td1.forEach(function(name, i) {
    renderer.text(
        name,
        cellLeft + cellPadding,
        tableTop + (i + 2) * rowHeight - cellPadding
      )
      .css({
        fontWeight: 'bold'
      })
      .attr({
        align: 'left'
      })
      .add();
  });

  td2.forEach(function(point, row) {

    // Apply the cell text
    renderer.text(
        point,
        cellLeft + colWidth - cellPadding,
        tableTop + (row + 2) * rowHeight - cellPadding
      )
      .attr({
        align: 'left'
      })
      .add();
  });
};

var td1 = ['text1', 'text2', 'text3'];
var td2 = ['text12', 'text22', 'text32'];
/**
 * Create the data table
 */
Highcharts.drawTable = function() {

  // user options
  var tableTop = 0,
    colWidth = 100,
    tableLeft = 20,
    rowHeight = 20,
    cellPadding = 2.5,
    valueDecimals = 1,
    valueSuffix = ' °C';

  // internal variables
  var chart = this,
    series = chart.series,
    renderer = chart.renderer,
    cellLeft = tableLeft;

  // draw category labels
  td1.forEach(function(name, i) {
    renderer.text(
        name,
        cellLeft + cellPadding,
        tableTop + (i + 2) * rowHeight - cellPadding
      )
      .css({
        fontWeight: 'bold'
      })
      .attr({
        align: 'left'
      })
      .add();
  });

  td2.forEach(function(point, row) {

    // Apply the cell text
    renderer.text(
        point,
        cellLeft + colWidth - cellPadding,
        tableTop + (row + 2) * rowHeight - cellPadding
      )
      .attr({
        align: 'left'
      })
      .add();


  });


};



var chart = Highcharts.chart('container', {

  chart: {
    height: 600,
    width: 600
  },

  exporting: {
    chartOptions: {
      chart: {
        height: 600,
        marginTop: 110,
        events: {
          load: Highcharts.drawTable
        }
      },
      legend: {
        y: -220
      },
      title: {
        align: 'center',
        y: 90
      },
      credits: {
        position: {
          y: -220
        }
      }
    }
  },
  series: [{
    data: [1, 2]
  }]
});

<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>
<div id="container"></div>

Fiddle演示

【讨论】：