在highcharts中组合子弹和折线图

时间:2013-11-15 14:54:56

标签: javascript highcharts

我正在使用highcharts在一个网页上显示16个折线图 - 一种数据仪表板。但是,我被要求添加带有进度指示器的“子弹”图表以及每个折线图。这是一个页面上的32个图表。我有两个与此相关的问题:

有没有办法合并子弹/条形图并将其放在折线图的顶部?主要原因是导出功能将包括两个图表。这是一个类似的例子(这是融合图表):http://www.ods.usf.edu/Plans/PPA/dashboard.htm

此外,由于呈现的数字,图表呈现时页面的性能会不稳定。有没有人有一种技术可以将图表加载到“折叠之上”,以后其他人可以用来改善用户体验?

谢谢!

1 个答案:

答案 0 :(得分:1)

任何组合这两个图表的方式都会非常困难和困难 - 你有一个倒置的图表,而不是一个图表。您必须将子弹图重新创建为线而不是条形图,或将线数据转换为使用反转轴。

这两件事似乎都是不受欢迎的,但如果绝对需要,我会选择用线系列创建子弹。

您可以使用2个堆叠的y轴运行它以使它们保持在separate plot areas

http://jsfiddle.net/jlbriggs/TP7tB/2/

您可以ajax加载图表,无论是在页面加载还是捕获滚动事件。

但实际上 - 这是32张图表,但它们是32个非常小而简单的图表。不应该有任何性能问题...

您可以通过设置一次全局图表选项来节省开销,并且仅在调用每个单独的图表时指定renderTo和data属性。

此外,如果您搜索导出多个图表,您应该找到一种方法来导出两个图表而不尝试将它们构建为单个图表。