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

I'm trying to export a dynamically generated chart and I've noticed that some things don't get exported. For example, my chart has PlotBands which are dynamic depending on the data being displayed.

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

As I built my chart, I followed the standard code layout of all the great HighChart examples where I generated the chart immediately on the document load. Then later in my code, I use an Ajax call to load the data and modify things like titles, plot bands, custom text, etc.

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

The problem is that anything modified on the chart after the initial chart load won't be exported to images or PDFs. My PlotBands were added during the Ajax call. They couldn't be included in the chart object that was built on document.load(). So they were conveniently ignored by HighCharts.

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

In my chart, I want to show energy usage during a 24-hour period at different sites. The user can choose different days and different sites. The Plot Bands needed to highlight the operating hours and each site has different operating hours which are loaded with the data. Also, the chart title shows the site name and the subtitle shows the square footage.

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

Additionally, my code draws some custom text on the bottom of the graph using the HighCharts renderer text() command.

此外，我的代码使用HighCharts渲染器text（）命令在图形的底部绘制一些自定义文本。

My code for the barely-functioning export looks something like this:

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

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

Unfortunately, the title, the plot bands and the "custom text" won't appear if the user exports the chart.

不幸的是，如果用户导出图表，则不会出现标题，情节带和“自定义文本”。

2 个解决方案

#1

yes - its possible and highcharts support things you mentioned here's sample code http://jsfiddle.net/vijaykumarkagne/9c2vqq7q/ of dynamic highchart using json data of file hosted in google drive.

是的 - 它可能和highcharts支持你在这里提到的示例代码http://jsfiddle.net/vijaykumarkagne/9c2vqq7q/的动态高图，使用谷歌驱动器中托管的文件的json数据。

    $.getJSON("https://b943d995d961c8938d74bf398f8748e2b34864c6.googledrive.com/host/0B_i_hw1oG1HeaU9nMWxfTnJZd1k/data.json",{format:"json"},function(result){
     
               
chart = new Highcharts.Chart({
        chart: {
            zoomType: 'x',
            type: 'line',
            renderTo: 'container'
        },
        title: {
            text: ' '
        },
        subtitle: {
            text: 'Click and drag in the plot area to zoom in',
            x: -20
        },
        xAxis: {
            type: 'datetime',
            title: {
                text: ' '
            }

        },
        yAxis: {
            title: {
                text: ' '
            }
        },        

        series:[{
            name: 'Tokyo',
            data: result
        }]

     });
        });

 <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://b943d995d961c8938d74bf398f8748e2b34864c6.googledrive.com/host/0B_i_hw1oG1HeaU9nMWxfTnJZd1k/dataEmp.json"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<body>
<div id="container"></div>
</body>

#2

(answering my own question here)

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

The key is to re-arrange how you build your chart.

关键是重新安排如何构建图表。

Don't generate the chart on the document.load(). Generate it in the success() function of the ajax call.

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

First, check if the chart already exists and destroy() it. If your code allows the users to dynamically change settings, that will cause a new ajax call to execute which will need to update the graph. The chart needs to be destroyed before being re-built.

首先，检查图表是否已存在并销毁（）它。如果您的代码允许用户动态更改设置，那么将导致执行新的ajax调用，这将需要更新图形。图表需要在重建之前销毁。

Now build a new chart from scratch. But, now you already have the data you need from the ajax call so you can build it from scratch with the correct information. HighCharts will only export data that was included the first time the chart was created. So all custom data needs to be included here. If you need to change something on the graph, destroy it and rebuild it using the custom data.

现在从头开始构建一个新图表。但是，现在您已经拥有了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);
        }
    });
}

Now, the chart will show all the custom things you've added. Notice that the custom text written to the chart using the renderer.text() command are added in the chart.load() event. For some reason, it only works here.

现在，图表将显示您添加的所有自定义内容。请注意，使用renderer.text（）命令写入图表的自定义文本将添加到chart.load（）事件中。出于某种原因，它只适用于此。

Remember the key: HighCharts will only export data that was included the first time the chart was created. This will save you a lot of headaches.

记住密钥：HighCharts只会导出第一次创建图表时包含的数据。这将为您节省很多麻烦。