在同一页面上使用 Highstock 和 Highchart-Gantt

Question

我正在尝试使用 Highcharts set of javascript libraries to create a page that displays both a stock prices chart and a gantt chart (using the Highstocks and Highcharts Gantt 库）

我在单独的页面上独立创建和显示这些图都没有问题。

但是，我无法让这两个库协同工作以在同一网页上显示这两个图。

对于如何让这两个库协同工作，我将不胜感激。

尝试 1. 如果我先导入 highstock 脚本

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>

然后会发生以下情况：

将显示价格图，但不会显示甘特图。

它在控制台中抛出两条错误消息：

Uncaught Error: Highcharts error #16: www.highcharts.com/errors/16
at m (highstock.src.js:463)
at Object.d.error (highstock.src.js:474)
at highcharts-gantt.src.js:21
at highcharts-gantt.src.js:9

和

Uncaught TypeError: Highcharts.ganttChart is not a function
    at myExample.html:60

尝试 2. 如果我先导入甘特图脚本

<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>

然后会发生以下情况：

将显示甘特图，但不会显示价格图。

它在控制台中抛出两条错误消息：

Uncaught Error: Highcharts error #16: www.highcharts.com/errors/16
    at d (highcharts-gantt.src.js:463)
    at Object.c.error (highcharts-gantt.src.js:474)
    at highstock.src.js:21
    at highstock.src.js:9    ```

and

未捕获类型错误：Highcharts.stockChart 不是一个函数在 myExample.html:28

示例代码

用于演示我运行遇到的问题的最小可行代码如下：

<html>
<head>
    <script src="https://code.highcharts.com/stock/highstock.js"></script>
    <script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
</head>
<body>
    <!-- ================================================================== -->
    <!-- PRICES PLOT -->
    <!-- ================================================================== -->
    <div id="pricesChart" style="height: 500px; min-width: 310px"></div>
    <script type="text/javascript">
        var prices =
            [[Date.parse("2019-06-01 00:00:00"), 0.081558],
             [Date.parse("2019-06-02 00:00:00"), 0.081728],
             [Date.parse("2019-06-03 00:00:00"), 0.081624],
             [Date.parse("2019-06-04 00:00:00"), 0.08164500000000001]
             ];

        var lineplotOptions = {
            xAxis: { type: 'datetime' },
            series: [{
                    type: "line",
                    data: prices,
                    yAxis: 0,
                }],
        };

        Highcharts.stockChart('pricesChart', lineplotOptions);
    </script>

    <!-- ================================================================== -->
    <!-- GANT CHART -->
    <!-- ================================================================== -->
    <div id="container"></div>
    <script type="text/javascript">
        var tasks =
            [{
                start: Date.parse("2019-06-01 06:00:00"),
                end: Date.parse("2019-06-01 20:30:00"),
                name: 'task1'
            }, {
                start: Date.parse("2019-06-01 09:20:00"),
                end: Date.parse("2019-06-03 02:00:00"),
                name: 'task2'
            }, {
                start: Date.parse("2019-06-02 11:00:00"),
                end: Date.parse("2019-06-03 21:10:00"),
                name: 'task1'
            }];

        var gant_options = {
            yAxis: { uniqueNames: true },
            scrollbar: {enabled: true },
            series: [{
                name: 'Project 1',
                data: tasks
            }]
        }

        var mychart = Highcharts.ganttChart('container', gant_options);

    </script>

</body>
</html>

Whosebug 上的类似问题

以下是关于堆栈溢出的类似问题，但并不能完全解决我的具体情况。

use highchart and highstock on the same page
- 这两个处理同一页面上的 highcharts 和 highstock 库。
- Highstock 库扩展了 highcharts 的功能，因此无需导入 highcharts。
- 这对我的情况没有帮助，因为我需要的功能不包含在 highstock 或 highcharts-gantt 中。

Answer 1

您可以像这样分别加载 highstock 和 highcharts-gantt:

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script>
    var Highstock = window.Highcharts;
    window.Highcharts = null;
</script>
<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>

初始化：

Highstock.stockChart('container1', {
  series: [{
    data: []
  }]
});

Highcharts.ganttChart('container2', {
  series: [{
    data: []
  }]
});

演示：

https://jsfiddle.net/BlackLabel/Lxnjwsb9/1/

在同一页面上使用 Highstock 和 Highchart-Gantt

using Highstock and Highchart-Gantt on same page

javascript

highcharts

gantt-chart

尝试 1. 如果我先导入 highstock 脚本

尝试 2. 如果我先导入甘特图脚本

示例代码

Whosebug 上的类似问题