Question

我使用以下代码获取png导出：

    var added_chart_options = {
    credits:{
        enabled: true
    },
    title:{
        style:{
            display: 'block'
        }
    },
    subtitle:{
        style:{
            display: 'block'
        }
    }
};

var options = Highcharts.merge(false, Highcharts['charts'][0]['options'], added_chart_options);

var data = {
    options: JSON.stringify(options),
     resources: {
         css: ".highcharts-background { fill: #fff; stroke: #0ff; stroke-width: 2px}"
    },
    filename: 'test.png',
    type: 'image/png',
    async: true
};

var exportUrl = 'https://export.highcharts.com/';
$.post(exportUrl, data, function(data) {
    var imageUrl = exportUrl + data;
    var urlCreator = window.URL || window.webkitURL;
    fetch(imageUrl).then(response => response.blob()).then(data => {console.log(data, imageUrl)});
})

我有很多问题：

如何为导出的图像设置字体？目前我已经使用自定义css为整个项目添加了字体。
传说延迟了我所看到的。它会折叠文本（即使是不需要的行）
格式化程序无效。在xAxis dataLabels中，我使用了格式化程序，但无法导出。

UPDATE1

我的传奇代码是：

 legend:{
        useHTML: true,
        borderWidth: 1,
        layout: "horizontal",
        align: "center",
        verticalAlign: "bottom",
        alignColumns: true,
        rtl: true,
        itemWidth: null,
        x: 20
    },

它在浏览器中完美显示，但在导出后会爆炸。问题是宽度似乎有限，甚至足够短以填充宽度的图例线都会折叠。

Answer 1

实时演示，提供所有3个答案：http://jsfiddle.net/BlackLabel/w2ndyxm8/

如何为导出的图像设置字体？目前，我已经使用自定义CSS向整个项目添加了字体。

style.fontFamily属性在Highcharts中用于指定字体（在演示中应用于dataLabels）。默认的Highcharts导出服务器支持许多Google字体-我建议您尝试一下，看看是否支持所需的字体。

dataLabels: {
  enabled: true,
  style: {
    fontFamily: 'Cinzel' // Google font
  }
},

传奇与我所见不符。它折叠文本（甚至排成一行   不需要）

我无法复制。请分叉并编辑上面的演示，以便重新创建问题。

格式化程序不起作用。在xAxis dataLabels中，我使用了格式化程序   并且无法导出。

格式化程序如果在正常情况下（作为回调函数）或在dataLabels.formatter属性中作为字符串进行定义，则在导出中将不起作用。如果您update这样的字符串中的图表options.callback，它们将起作用：

  callback: `function(chart) {
    chart.series[0].update({
      dataLabels: {
        formatter: function() {
          return 'Font and formatter test';
        }
      }
    });
  }`

highcharts导出图像选项

1 个答案: