HighCharts - 如何创建导出一切的动态图表

Question

我正在尝试导出动态生成的图表,我注意到有些东西没有导出.例如,我的图表有PlotBands,它们是动态的,具体取决于显示的数据.

当我构建我的图表时,我遵循了所有伟大的HighChart示例的标准代码布局,我在文档加载时立即生成了图表.然后在我的代码中,我使用Ajax调用来加载数据并修改标题,绘图带,自定义文本等内容.

问题是在初始图表加载后在图表上修改的任何内容都不会导出到图像或PDF.在Ajax调用期间添加了我的PlotBands.它们无法包含在构建的图表对象中document.load().所以HighCharts很容易忽略它们.

在我的图表中,我想在不同地点的24小时内显示能源使用情况.用户可以选择不同的日期和不同的站点.Plot Bands需要突出显示运行时间,每个站点都有不同的运行时间,这些运行时间都加载了数据.此外,图表标题显示网站名称,副标题显示平方英尺.

此外,我的代码使用HighCharts渲染器text()命令在图形底部绘制一些自定义文本.

我几乎没有功能的导出代码看起来像这样:

var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: "ChartContainer",
            type: "line",
            title: { text: null },
            subtitle: { text: null }
        }
    }
});

function UpdateChart() {
    $.ajax({
        url: "/my/url.php",
        success: function(json) {
            chart.addSeries(json[1]);
            chart.addSeries(json[2]);
            chart.setTitle(json[0].title, json[0].subtitle);
            chart.xAxis[0].addPlotBand({ color: "#FCFFB9", from: json[0].OpenInterval, to: json[0].CloseInterval, label: { text: "Operating Hours", verticalAlign: "bottom", y: -5, style: { fontSize: "8pt", color: "gray" } } });
            chart.renderer.text("Custom Text", 50, 100);
        }
    });
}

不幸的是,如果用户导出图表,则不会出现标题,情节带和"自定义文本".

Answer 1

（在这里回答我自己的问题）

关键是重新安排构建图表的方式。

不要在 上生成图表document.load()。success()在ajax调用的函数中生成它。

首先，检查图表是否已经存在destroy()。如果您的代码允许用户动态更改设置，这将导致执行新的 ajax 调用，这将需要更新图表。图表需要在重建之前被销毁。

现在从头开始构建一个新图表。但是，现在您已经从 ajax 调用中获得了所需的数据，因此您可以使用正确的信息从头开始构建它。HighCharts 将仅导出首次创建图表时包含的数据。因此，所有自定义数据都需要包含在此处。如果您需要更改图表上的某些内容，请销毁它并使用自定义数据重建它。

function UpdateChart() {
    $.ajax({
        url: "/my/url.php",
        success: function(json) {
            // If the chart exists, destroy it
            if (chart) chart.destroy();

            // Create the chart
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: "ChartContainer",
                    type: "line",
                    events: {
                        load: function(event) {
                            this.renderer.text("Custom Text", 50, 100);
                        }
                    },
                    title: { text: json[0].title },
                    subtitle: { text: json[0].sqft }
                },
                plotBands: {
                    color: "#FCFFB9",
                    from: json[0].OpenInterval,
                    to: json[0].CloseInterval,
                    label: {
                        text: "Store Hours", verticalAlign: "bottom", y: -5, style: { fontSize: "8pt", color: "gray" }
                    }
                }
            };

            // Add two data series to the chart
            chart.addSeries(json[1]);
            chart.addSeries(json[2]);

            // Set title and sub-title
            chart.setTitle(json[0].title, json[0].subtitle);
        }
    });
}

现在，图表将显示您添加的所有自定义内容。请注意，使用命令写入图表的自定义文本renderer.text()已添加到chart.load()事件中。由于某种原因，它只在这里有效。

请记住要点：HighCharts 将仅导出第一次创建图表时包含的数据。 这将为您省去很多麻烦。