Question

我们有一个包含4个系列数据的图表，每次只显示一个。所有4个系列都已添加到图表中，只有3个不可见。要查看另一个系列，请在图例中单击它。现在这个系列是可见的，但其他3个不是。

以下是我们正在做的事情的示例：jsFiddle。请注意，没有启用导出按钮 - 请参阅下面的第3项。

我们允许用户导出图表。测试这个我们发现了2个问题（并且在尝试为这篇文章创建一个jsFiddle时出现了第三个问题）： 1）通过rangeSelector按钮更改范围后，它会进行核心渲染，但在导出时，“突出显示”范围选择是图表最初加载时的默认选择。通过从导出中删除rangeSelector来解决此问题。这不是一个理想的解决方案，但它隐藏了这个bug。我们是这样做的：

 exporting: {
     chartOptions: {
         rangeSelector: {
             enabled: false
         }
     },
     buttons: {
         enabled: false
     },
     filename: 'UnempRate',
     width: 590
 }

2）当更改可见的系列时，我们还将导航器系列设置为它并更新图表标题（我们在图表的底部）。当用户导出数据时，主图表列出了正确的系列，但导航器返回到原始的“已加载”系列，图表标题也是如此。

3）当尝试创建一个jsFiddle时，我在events: legendItemClick上遇到错误，只有在我将导出按钮设置为启用时才会定义chartTrend：

 navigation: {
     buttonOptions: {
         enabled: false
     }
 }

所以我不知道如何让你们在这里看到这个问题。

基本上我们希望导航器系列和图表标题与用户在选择导出图表时通过legendItemClick选择的内容相匹配。

Answer 1

这些问题是导出模块工作原理的结果。

基本上它会在隐藏元素中创建一个全新的图表。这个新图表总是使用SVG渲染器（因此没有SVG支持的浏览器，如旧的IE或Androids 2.x会生成无法显示的代码）。然后Highcharts生成SVG代码并将其发送到exportin服务器。但是，这个新图表是根据选项创建的，因此几乎所有在运行时更改的内容都已消失。

如果您不必支持Androids 2.x或IE＆lt; 9，则可以调用chart.getSVG并将POST请求直接发送到导出服务器。以下是样本请求有效负载：

------WebKitFormBoundaryiBhRpBiiTfKjcspB
Content-Disposition: form-data; name="filename"

UnempRate
------WebKitFormBoundaryiBhRpBiiTfKjcspB
Content-Disposition: form-data; name="type"

image/png
------WebKitFormBoundaryiBhRpBiiTfKjcspB
Content-Disposition: form-data; name="width"

590
------WebKitFormBoundaryiBhRpBiiTfKjcspB
Content-Disposition: form-data; name="scale"

2
------WebKitFormBoundaryiBhRpBiiTfKjcspB
Content-Disposition: form-data; name="svg"

<svg xmlns:xlink="http://www.w3.org/1999/xlink" ...and so on to the end of SVG code
------WebKitFormBoundaryiBhRpBiiTfKjcspB--

但是如果你必须支持尽可能多的浏览器，你应该存储导航系列，活动范围选择器按钮等信息，并将它们作为exportChart方法中的第二个参数传递：http://api.highcharts.com/highcharts#Chart.exportChart()

HighStock Export呈现不正确的标题和导航系列

1 个答案: