HighStock导出渲染不正确的标题和导航器系列

HighStock Export Renders Incorrect Title and Navigator Series

本文关键字：标题 导航 系列 不正确 HighStock      更新时间：2023-09-26

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

下面是我们正在做的一个示例:请注意，它没有启用导出按钮-参见下面的第3项。

我们允许用户导出图表。通过测试，我们发现了两个问题(第三个问题是在试图为这篇文章制作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选择的内容

这些问题是导出模块的工作方式导致的。

基本上它在一个隐藏元素中创建了一个全新的图表。这个新图表总是使用SVG渲染器(所以没有SVG支持的浏览器，如旧IE或android 2)。X生成无法显示的代码)。然后Highcharts生成SVG代码并将其发送到导出服务器。然而，这个新图表是由选项创建的，所以几乎所有你在运行时更改的内容都将消失。

如果你不支持android 2。x或IE<9，您可以调用图表。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()

相关文章：