Question

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

有什么想法吗？

var chart;

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

Answer 1

尝试检查代码here。

Answer 2

从版本4.1.8开始，Highcharts有一个名为allowHTML的新属性，它允许在图表中呈现的HTML元素（例如，使用renderer.html）以导出的版本显示（PDF， PNG等。）。

以下是API文档中allowHTML的详细信息： http://api.highcharts.com/highcharts#exporting.allowHTML

allowHTML：Boolean

允许HTML的实验设置   在图表内部（通过useHTML选项添加），直接在   导出图像。这允许您保留复杂的HTML   表格或导出图表中的双向文本等结构。

免责声明：HTML在foreignObject标记中呈现   生成SVG。官方导出服务器基于PhantomJS，其中   支持这一点，但其他SVG客户端，如Batik，不支持它。   这也适用于要在桌面上打开的已下载SVG   客户端。

默认为false。

要记住的一件事是：如果您设置图表中使用的任何HTML样式，则需要使用内联样式（与类相比），以便在导出的版本上显示该格式。 / p>

使用自定义HTML图表导出Highcharts

2 个答案: