0

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

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

我们允许用户导出图表。对此进行测试，我们发现了 2 个问题（第三个刚刚在尝试为这篇文章制作 jsFiddle 时出现）：1）通过rangeSelector按钮更改范围后，它会正确呈现，但在导出时，“突出显示”范围选择是这是图表最初加载时的默认选择。rangeSelector通过从导出中删除来解决这个问题。这不是一个真正理想的解决方案，但它隐藏了错误。以下是我们的做法：

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

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

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

 navigation: {
     buttonOptions: {
         enabled: false
     }
 }

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

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

4

1 回答 1

0

这些问题是导出模块如何工作的结果。

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

如果您不必支持 Androids 2.x 或 IE<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()

于 2013-03-24T13:49:20.597 回答