HighCharts - 如何创建动态图表并导出所有内容

Question

我正在尝试导出一个动态生成的图表，但是我注意到有些东西没有被导出。例如，我的图表有PlotBands，这是根据显示的数据动态生成的。

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

问题是，初始图表加载后对图表进行的任何修改都不会导出为图像或PDF。我的PlotBands是在Ajax调用期间添加的。它们无法包含在在document.load()上构建的图表对象中。所以它们被HighCharts方便地忽略了。

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

此外，我的代码使用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);
        }
    });
}

很不幸，如果用户导出图表，标题、数据带区间和“自定义文本”将不会显示。

- Dr. Cool

---

你能够缩小问题范围吗？ - Hardik Mishra

如果我表达不清楚，对不起。这不是问题。这是我想与我的 StackMates 分享的解决方案，如果他们在这里搜索我曾经遇到的相同问题：在某些情况下使 HighCharts 导出按预期工作。 - Dr. Cool

这是一个非常好的想法。非常欢迎您。在这种情况下，您可以在问题中提到问题，SO允许用户回答自己的帖子。您可以回答自己的帖子。 - Hardik Mishra

@Dr.Cool如果您能将此作为答案发布并重新提出问题，只需提供问题陈述，那就太好了。 - Jugal Thakkar

当我第一次写这篇文章时，我在问题中包含了答案。现在我已经将答案分离出来，并在下面提供。 - Dr. Cool

Answer 1

(在这里回答自己的问题)

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

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

首先，检查图表是否已经存在并进行 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只会导出第一次创建图表时包含的数据。这将为您节省很多麻烦。

- Dr. Cool

Answer 2

是的 - 这是可能的，而且Highcharts支持你在这里提到的东西。这里有一个使用托管在Google Drive上的文件的JSON数据的动态Highchart的示例代码http://jsfiddle.net/vijaykumarkagne/9c2vqq7q/。

    $.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>

- Vijaykumar

---

请不要提供链接回答，考虑在回答中提供代码示例。 - arghtype

现在它正在工作，我在答案中包含了代码示例，请查看。 - Vijaykumar