Reserve space for text in exported Highchart

问题

We've a barchart that grows/shrinks based on data within a given container. We also allow the user to export the chart to PDF. During export, some text is placed in a pre-determined location.

When the chart is tall enough, the chart runs into the text. When I adjust the sourceWidth and/or sourceHeight the chart grows to take all the space. Essentially, I'm looking for ways to reserve some space in the exported document for the text so that the bar never runs into the text. How do I do this?

Notice the top most two blocks of the left bar running into text.

My export code is:

    $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);
    };

I'm including some text in the load event of exporting.chartOptions.chart.events as below:

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

回答1:

If the position of the rendered text is known, you can set an exported chart's margin top.

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

example: http://jsfiddle.net/5jvpzsqm/

来源：https://stackoverflow.com/questions/41128350/reserve-space-for-text-in-exported-highchart

标签

Highcharts