在同一页上使用Highstock和High图表-甘特
在同一页上使用Highstock和High图表-甘特
提问于 2019-10-16 00:27:45
我试图使用javascript库的高图集集合创建一个同时显示股票价格图和甘特图的页面(使用高库存和高图表甘特库)。
我不会在单独的页面上独立地创建和显示这些情节。
然而，我不能让这两个库一起工作，以便在同一个网页上显示这两幅图。
我希望能在如何让这两个库一起工作方面得到任何帮助。
尝试1.如果我首先导入highstock脚本
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>然后发生以下情况：
- 价格图将显示，但甘特图不显示。
- 它在控制台中抛出两条错误消息： 未明错误:高海图错误#16: www.Highcharts.com/ error /16 at m (highstock.src.js:463) at Object.d.error (highstock.src.js:474) at High图表-gantt.src.js:21 at highcharts-gantt.src.js:9 和 Uncaught : Highcharts.ganttChart不是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>然后发生以下情况：
- 甘特图将显示，但价格图不显示。
- 它在控制台中抛出两条错误消息： 未明错误:高海图错误#16: www.Highcharts.com/ error /16 at d(High曲线图-gantt.src.js:463) at Object.c.error (High曲线图-gantt.src.js:474) at highstock.src.js:21 at highstock.src.js:9‘和 Uncaught : 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>关于堆栈溢出的类似问题
下面是关于堆栈溢出的类似问题，但这些问题不太适合我的具体情况。
- 在同一页面上使用高图集和高架
- 在相同的页面上使用高架和高架
- 这两个库在同一个页面上处理
highcharts和highstock库。 Highstock库扩展了高级图表的功能，因此不需要也导入高级图表。- 这无助于我的情况，因为我所需要的功能不是单独包含在
highstock或highcharts-gantt中的。
- 这两个库在同一个页面上处理
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-10-16 08:00:44
您可以像这样分别加载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: []
}]
});演示：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58404180
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号