Highcharts不导出HTML图表上可见的Unicode字符

wer*_*eld 10 jquery highcharts

我面临着一个难题.我有一个图表,在网页上正确呈现所需的unicode重音字符(想想西班牙语,但也有一些英文单词).DOM正确显示这些字符,SVG包含它们.一切都很好.但是,当我尝试将这些图表导出到由highcharts提供的基于node.js的导出服务器时,我得到了可怕的钻石"?" 遍布各处的符号.如果我使用其依赖HTML表复制整个图表逻辑,它会从我们的企业应用程序外部读取并导出(再次,到我们的本地节点服务器),它会正确呈现.

什么会阻止使用正确的字符编码导出完美呈现的图表?

示例jsfiddle我们的数据样本以及我们如何从HTML表创建.

我们用来导出的代码(我们不使用内置的汉堡包菜单):

function chartExportSwitch(chartid, exportSelect, graphHeader, graphFooter, marginSize) {
    var type = 'image/jpeg';

    switch ($(exportSelect).val()) {
        case 'JPEG':
            type = 'image/jpeg';
            break;
        case 'PNG':
            type = 'image/png';
            break;
        case 'SVG':
            type = 'image/svg+xml';
            break;
        case 'PDF':
            type = 'application/pdf';
            break;
    }

    chartExportLoc(chartid, type, graphHeader, graphFooter, marginSize);

    $(exportSelect).slideToggle('fast');
}

function chartExportLoc(chartid, exportType, graphHeader, graphFooter, marginSize) {
    var chartToExport = $('#' + chartid).highcharts();

    var sourceSpacingBottom = chartToExport.options.chart.spacingBottom;
    if (!marginSize) {
        marginSize = 15;    //HighCharts default
    }

    chartToExport.exportChart(
        {
            type: exportType,
            scale: 1,
            filename: chartid
        },
        {
            title: { text: graphHeader, margin: marginSize },
            subtitle: { y: 10, text: graphFooter },
            chart: { shadow: false, width: 800, spacingBottom: sourceSpacingBottom - 20 }
        });

    return false;
}
Run Code Online (Sandbox Code Playgroud)

我最初的想法是,我可以在导出时修改项目,例如:

if (chartToExport.xAxis[0].categories != undefined) {
    for (index = 0; index < chartToExport.xAxis[0].categories.length; ++index) {
        chartToExport.xAxis[0].categories[index] = unescape(encodeURI(chartToExport.xAxis[0].categories[index]));
    }
}
Run Code Online (Sandbox Code Playgroud)

这似乎有效,但当然,它也会修改页面上的现有图表 - 这会产生一些有趣的文本工件.

因此,我尝试在导出代码中克隆我的highcharts对象,但这仍然只显示对深层项目的引用而不是实际复制/克隆,因为如果我categories在我的chartClone对象上进行上述更改,它仍会修改原始图表:

var chartToExport = $('#' + chartid).highcharts();
var chartToExport = jQuery.extend(true, {}, $('#' + chartid).highcharts());
Run Code Online (Sandbox Code Playgroud)

我也试过以下但是在圆形对象上有错误:

var chartClone = JSON.parse(JSON.stringify(chartToExport));
Run Code Online (Sandbox Code Playgroud)

我也尝试过Highcharts.merge()方法:

var origChart = $('#' + chartid).highcharts();
var chartToExport = Highcharts.merge(false, origChart);
Run Code Online (Sandbox Code Playgroud)

这会导致超出callstack 所以,后续问题是如何深度复制highcharts对象?