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

【问题标题】：using Highstock and Highchart-Gantt on same page在同一页面上使用 Highstock 和 Highchart-Gantt
【发布时间】：2019-10-16 00:27:45
【问题描述】：

我正在尝试使用Highcharts javascript 库集来创建一个显示股票价格图表和甘特图的页面（使用Highstocks 和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>

stackoverflow 上的类似问题

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

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

【问题讨论】：

用上面的例子codesandbox.io/s/dreamy-fermat-77q2t?fontsize=14创建了一个沙箱，它对我来说工作正常。
@VishalRajole ，但它没有显示甘特图。只有价格情节。

标签： javascript highcharts gantt-chart

【解决方案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/

【讨论】：

完美！非常感谢@Wojciech :)