Highcharts使用自定义HTML图形导出

我正在生成一个自定义图例作为HTML表。我希望在使用导出功能时能够包含它。这是可能的，还是我必须使用useHTML函数

有什么想法吗

var图

chart = new Highcharts.Chart({
    chart: {
        renderTo: 'chartContainer',
        height: 500, // 600,
        width: 1150,
        type: 'column',
        defaultSeriesType: 'spline',
        backgroundColor: null,
        reflow: false,
        shadow: false,
        //marginLeft: 60,
        //spacingTop: 10,
        spacingBottom: 100,
        width: 1150,
        events: {
            load: function () {

            }
        }
    },
    credits: {
        enabled: false
    },
    legend: {
        enabled: true,
        useHTML: true,
        layout: 'vertical',
        formatter: function () {
            return '<td>' + this.name + '</td>';
        }
    },
    title: {
        text: "Power",
        style: {
            color: '#484a4a',
            fontSize: '22px',
            fontFamily: 'Arial, Helvetica, sans-serif',
            fontWeight: 'bold'
        }
    },
    subtitle: {
        text: "Wednesday, January 01 2014 through Saturday, January 18 2014",
        y: 36,
        style: {
            color: '#7e8081'
        }
    },
    xAxis: [{
        title: {
            text: 'Time',
            style: {
                color: '#0063A2',
                fontFamily: 'Arial, Helvetica, sans-serif',
                fontWeight: 'bold'
            }
        },
        type: 'datetime',
        dateTimeLabelFormats: {
            second: '%H:%M:%S',
            minute: '%H:%M',
            hour: '%I:%M %p',
            day: '%b %d',
            month: '%B',
            year: '%Y'
        },
        plotBands: [{
            color: '#DDECFF',
            from: 1388768400000,
            to: 1388941200000
        }, {
            color: '#DDECFF',
            from: 1389373200000,
            to: 1389546000000
        }, {
            color: '#DDECFF',
            from: 1389978000000,
            to: 1390150800000
        }, {
            color: '#DDECFF',
            from: 1390582800000,
            to: 1390755600000
        }]

    }, {
        labels: {
            enabled: false
        },
        lineWidth: 0,
        tickWidth: 0
    }],
    yAxis: {
        title: {
            text: 'Consumption (kWh)',
            style: {
                color: '#0063A2',
                fontFamily: 'Arial, Helvetica, sans-serif',
                fontWeight: 'bold'
            }
        },
        min: 0,
        plotLines: [{
            value: 0,
            width: 2,
            color: '#000000'
        }]
    },
    tooltip: {

        enable: true,
        formatter: function () {
            return Highcharts.dateFormat('%A, %b %e, %Y - %I:%M %P', this.x) + '<br/>' + '<span style=color:#0063A2;>' + this.series.name.split('|')[1] + '</span> : ' + '<b>' + Highcharts.numberFormat(this.y, 2) + ' kWh' + '</b>'
        }



    },
    plotOptions: {

        spline: {
            enableMouseTracking: true,
            animation: {
                duration: 1500
            },
            marker: {
                enabled: false,
                states: {
                    hover: {
                        enabled: true,
                        symbol: 'circle',
                        radius: 5,
                        lineWidth: 1
                    }
                }
            }
        }
    },

    series: [{
        name: "Building 1|Meter 1|870.68 kWh",
        visible: true,
        showInLegend: true,
        xAxis: 0,

        data: [
            [1388534400000, 65.598914000000000000],
            [1388620800000, 68.851831000000000000],
            [1388707200000, 60.547108000000000000],
            [1388793600000, 51.878880000000000000],
            [1388880000000, 46.766490000000000000],
            [1388966400000, 47.069411000000000000],
            [1389052800000, 54.288275000000000000],
            [1389139200000, 59.740870000000000000],
            [1389225600000, 49.483467000000000000],
            [1389312000000, 47.307088000000000000],
            [1389398400000, 39.515004000000000000],
            [1389484800000, 46.416965000000000000],
            [1389571200000, 46.892318000000000000],
            [1389657600000, 39.748021000000000000],
            [1389744000000, 47.707878000000000000],
            [1389830400000, 52.755024000000000000],
            [1389916800000, 46.109382000000000000]
        ]

    }, {
        name: "Building 1|Meter 2|1551.64 kWh",
        visible: true,
        showInLegend: true,
        xAxis: 0,

        data: [
            [1388534400000, 44.189323000000000000],
            [1388620800000, 109.177733000000000000],
            [1388707200000, 108.329552000000000000],
            [1388793600000, 50.555344000000000000],
            [1388880000000, 54.558574000000000000],
            [1388966400000, 111.037208000000000000],
            [1389052800000, 106.283663000000000000],
            [1389139200000, 91.240093000000000000],
            [1389225600000, 110.277573000000000000],
            [1389312000000, 115.203550000000000000],
            [1389398400000, 51.361583000000000000],
            [1389484800000, 50.476118000000000000],
            [1389571200000, 109.615805000000000000],
            [1389657600000, 108.753643000000000000],
            [1389744000000, 113.507186000000000000],
            [1389830400000, 112.714930000000000000],
            [1389916800000, 104.354283000000000000]
        ]

    }, {
        name: "Building 1|Meter 3|1400.82 kWh",
        visible: true,
        showInLegend: true,
        xAxis: 0,

        data: [
            [1388534400000, 37.352607000000000000],
            [1388620800000, 94.506990000000000000],
            [1388707200000, 90.280063000000000000],
            [1388793600000, 36.979780000000000000],
            [1388880000000, 40.526298000000000000],
            [1388966400000, 99.731228000000000000],
            [1389052800000, 108.977339000000000000],
            [1389139200000, 113.311452000000000000],
            [1389225600000, 100.197263000000000000],
            [1389312000000, 103.398914000000000000],
            [1389398400000, 37.813981000000000000],
            [1389484800000, 44.259228000000000000],
            [1389571200000, 98.668671000000000000],
            [1389657600000, 92.367895000000000000],
            [1389744000000, 107.649142000000000000],
            [1389830400000, 102.261792000000000000],
            [1389916800000, 92.540327000000000000]
        ]

    }]
}, function (chart) {
    var options = chart.options.legend;

    /**
     * What happens when the user clicks the legend item
     */
    function clickItem(series, $legendItem, $line) {
        series.setVisible();
        $legendItem.css(
        options[series.visible ? 'itemStyle' : 'itemHiddenStyle']);
        if (series.visible) $legendItem.css({
            color: series.color
        });
        $line.css({
            borderTop: '2px solid ' + (series.visible ? series.color : options.itemHiddenStyle.color)
        });
    }

    var $legendcontainer = $("<div id='centerdiv' class='highcharts-legend'>").appendTo($(".createGraph"));
    // Create the legend box
    var $legend = $('<table>')
        .css({
        width: 800,
        //maxHeight: 210,
        //left:175,
        padding: 10,
        //position: 'absolute',
        overflow: 'auto',

        //top: 510,
        borderColor: options.borderColor,
        borderWidth: options.borderWidth,
        borderStyle: 'solid',
        borderRadius: options.borderRadius
    })
        .appendTo($legendcontainer);

    var $headerrow = $("<tr>").appendTo($legend);
    $("<th>").appendTo($headerrow);
    $("<th>").html("Building Name").appendTo($headerrow);
    $("<th>").html("Meter Name").appendTo($headerrow);

    $("<th>").html("Total Consumption").appendTo($headerrow);

    $.each(chart.series, function (i, series) {
        var data = series.name.split('|');

        //shift columns to the right for formatting
        if (data[0] == "Aggregate") {
            data[2] = data[1];
            data[1] = data[0];
            data[0] = "";
        }
        // create the legend item            
        var $legendItem = $('<tr>')
            .css({
            position: 'relative',
            marginLeft: 20
        })
            .css(options[series.visible ? 'itemStyle' : 'itemHiddenStyle'])
            .css({
            color: series.color
        })
            .html("<td></td><td>" + data[0] + "</td><td>" + data[1] + "</td><td>" + data[2] + "</td>")
            .appendTo($legend);

        // create the line with each series color
        var $line = $('<div>')
            .css({
            width: 16,
            float: 'left',
            borderTop: '2px solid ' + (series.visible ? series.color : options.itemHiddenStyle.color)
        })
            .prependTo($($legendItem).find("td").first());

        // click handler 
        $legendItem.click(function () {
            clickItem(series, $legendItem, $line);
        });
    });
});

chart=新高度图表。图表({
图表：{
renderTo:“chartContainer”，
高度：500，//600，
宽度：1150，
键入：“列”，
defaultSeriesType:“样条线”，
背景颜色：空，
回流：错误，
影子：错，
//marginLeft:60，
//间距：10，
间距底部：100，
宽度：1150，
活动：{
加载：函数（）{
}
}
},
学分：{
已启用：false
},
图例：{
启用：对，
是的，
布局：“垂直”，
格式化程序：函数（）{
返回“”+this.name+“”；
}
},
标题：{
文字：“权力”，
风格：{
颜色：“#484a4a”，
fontSize:'22px'，
fontFamily：“Arial，Helvetica，无衬线”，
fontWeight:“粗体”
}
},
副标题:{
正文：“2014年1月1日星期三至2014年1月18日星期六”，
y:36，
风格：{
颜色：“#7e8081”
}
},
xAxis：[{
标题：{
文本：“时间”，
风格：{
颜色：“#0063A2”，
fontFamily：“Arial，Helvetica，无衬线”，
fontWeight:“粗体”
}
},
键入：“日期时间”，
日期时间标签格式：{
第二个：“%H:%M:%S”，
分钟：“%H:%M”，
小时：“%I:%M%p”，
日期：'%b%d'，
月份：'%B'，
年份：'%Y'
},
绘图带：[{
颜色：“#DDECFF”，
起始日期：138876840000，
致：138894120000
}, {
颜色：“#DDECFF”，
发件人：13893732000，
致：13895460000
}, {
颜色：“#DDECFF”，
起始日期：1389978000000，
致：1390150800000
}, {
颜色：“#DDECFF”，
发件人：1390582800000，
致：1390755600000
}]
}, {
标签：{
已启用：false
},
线宽：0，
宽度：0
}],
亚克斯：{
标题：{
文本：“耗电量（kWh）”，
风格：{
颜色：“#0063A2”，
fontFamily：“Arial，Helvetica，无衬线”，
fontWeight:“粗体”
}
},
分:0,，
绘图线：[{
值：0，
宽度：2，
颜色：'#000000'
}]
},
工具提示：{
启用：对，
格式化程序：函数（）{
返回Highcharts.dateFormat（“%A，%b%e，%Y-%I:%M%P'，this.x）+'
'+'+this.series.name.split（“|”）[1]+'：“+'+Highcharts.numberFormat（this.Y，2）+'kWh'+''
}
},
打印选项：{
样条曲线：{
enableMouseTracking：正确，
动画：{
持续时间：1500
},
标记：{
启用：false，
国家：{
悬停：{
启用：对，
符号：'圆'，
半径：5，
线宽：1
}
}
}
}
},
系列：[{
名称：“1号楼|表1 | 870.68 kWh”，
可见：对，
showInLegend：是的，
xAxis:0，
数据：[
[1388534400000, 65.598914000000000000],
[1388620800000, 68.851831000000000000],
[1388707200000, 60.547108000000000000],
[1388793600000, 51.878880000000000000],
[1388880000000, 46.766490000000000000],
[1388966400000, 47.069411000000000000],
[1389052800000, 54.288275000000000000],
[1389139200000, 59.740870000000000000],
[1389225600000, 49.483467000000000000],
[1389312000000, 47.307088000000000000],
[1389398400000, 39.515004000000000000],
[1389484800000, 46.416965000000000000],
[1389571200000, 46.892318000000000000],
[1389657600000, 39.748021000000000000],
[1389744000000, 47.707878000000000000],
[1389830400000, 52.755024000000000000],
[1389916800000, 46.109382000000000000]
]
}, {
名称：“1号楼|表2 | 1551.64 kWh”，
可见：对，
showInLegend：是的，
xAxis:0，
数据：[
[1388534400000, 44.189323000000000000],
[1388620800000, 109.177733000000000000],
[1388707200000, 108.329552000000000000],
[1388793600000, 50.555344000000000000],
[1388880000000, 54.558574000000000000],
[1388966400000, 111.037208000000000000],
[1389052800000, 106.283663000000000000],
[1389139200000, 91.240093000000000000],
[1389225600000, 110.277573000000000000],
[1389312000000, 115.203550000000000000],
[1389398400000, 51.361583000000000000],
[1389484800000, 50.476118000000000000],
[1389571200000, 109.615805000000000000],
[1389657600000, 108.753643000000000000],
[1389744000000, 113.507186000000000000],
[1389830400000, 112.714930000000000000],
[1389916800000, 104.354283000000000000]
]
}, {
名称：“1号楼3米1400.82千瓦时”，
可见：对，
showInLegend：是的，
xAxis:0，
数据：[
[1388534400000, 37.352607000000000000],
[1388620800000, 94.506990000000000000],
[1388707200000, 90.280063000000000000],
[1388793600000, 36.979780000000000000],
[1388880000000, 40.526298000000000000],