Question

我们有一个基于给定容器内数据增长/缩小的条形图。我们还允许用户将图表导出为PDF。在导出期间，某些文本放置在预定位置。

当图表足够高时，图表会运行到文本中。当我调整sourceWidth和/或sourceHeight时，图表会增长以占据所有空间。本质上，我正在寻找方法在导出的文档中为文本保留一些空间，以便条形图永远不会进入文本。我该怎么做？

请注意左侧栏中最顶部的两个块会运行到文本中。

我的导出代码是：

    $scope.exportPdf = function() {
        var chart = $("#group-chart").highcharts();
        var exportOptions = {
            type: "application/pdf",
            filename: "Chart",
            sourceWidth: 850,
            sourceHeight: 1100
        };
        var chartOptions = {
            yAxis: {
                gridLineWidth: 0,
                labels: {
                    enabled: false
                },
                title: {
                    text: null
                }
            }
        };
        chart.exportChart(exportOptions, chartOptions);
    };

我在load exporting.chartOptions.chart.events事件中包含了一些文字，如下所示：

this.renderer.text(disclaimerText, 100, 100)
    .css({
    fontSize: "60%",
    lineHeight: "10%",
    width: "600px"
    }).add();

Answer 1

如果已知渲染文本的位置，则可以将导出图表的边距设置为顶部。

 chart: {
    marginTop: 150,
    events: {
      load: function() {
        this.renderer.text('custom text', 100, 100)
          .css({
            fontSize: "60%",
            lineHeight: "10%",
            width: "600px"
          }).add();
      }
    }
  },

示例：http://jsfiddle.net/5jvpzsqm/

为导出的Highchart中的文本保留空间

1 个答案: