Question

我有折线图，我可以将图表导出为pdf或图像。

我想知道我是否可以在图表下面添加一些额外的文字，只有在我导出它时？比如有关图表数据的其他信息。

我想导出如下所示的图表：enter image description here

我使用Ionic v3。

如果可能，我想看一个示例代码。

谢谢。

Answer 1

请参阅此实时演示：http://jsfiddle.net/kkulig/fje0agem/

我通过操纵chart.height中的chart.marginBottom和exporting.chartOptions为文本区域创建了一些空间。我通过更改y偏移量来调整某些元素（信用，图例）的位置。

可以通过SVGRenderer呈现文字和线条。 load事件是使代码对此负责的适当位置。

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

  exporting: {
    chartOptions: {
      chart: {
        height: 600,
        marginBottom: 300,
        events: {
          load: function() {
            var renderer = this.renderer;

            renderer.path(['M', 30, 385, 'L', 570, 385, 'Z']).attr({
              stroke: 'black',
              'stroke-width': 1
            }).add();

            renderer.text('Some text...', 30, 400).add();
          }
        }
      },
      legend: {
        y: -220
      },
      credits: {
        position: {
          y: -220
        }
      }
    }
  }

API参考：

Answer 2

使用Highcharts 7.2.0，您可以在导出中包含的图表旁边添加caption（API）。

例如（JSFiddle demo）：

Highcharts.chart('container', {
    series: [{
        data: [1, 4, 3, 5],
    }],
    caption: {
        text: '<b>Example</b><br><em>Lorem ipsum dolor sit amet.</em>'
    }
});

在highcharts中导出图表时如何添加文本？

2 个答案: