在导出的海图中预留文字空间 [英] Reserve space for text in exported Highchart

问题描述

我们有一个根据给定容器内的数据增长/缩小的条形图。我们还允许用户将图表导出为PDF。在导出过程中，一些文本会被放置在预先确定的位置。

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.

当图表足够高时，图表会显示在文本中。当我调整 sourceWidth 和/或 sourceHeight 时，图表会增长以占据所有空间。从本质上讲，我正在寻找方法来为文本保留导出文档中的一些空间，以便该栏永远不会进入文本。我该如何做到这一点？

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.

我的出口代码是：

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

我在载入中加入了一些文本 > exporting.chartOptions.chart.events 的事件如下：

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();

推荐答案

如果已知渲染文本的位置，可以设置一个导出图表的边界顶部。

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();
      }
    }
  },

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

这篇关于在导出的海图中预留文字空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！