Javascript 跳线图在高图中的应用

我正在使用高图表制作跳线图和柱形图的组合图。对于跳线图，高位图没有这种类型。谁能有更好的解决办法？ 如何使用高图将跳转折线图与柱形图集成

这是我需要做的

这是我正在使用的代码

Highcharts.chart（“容器”{
标题：{
正文：“组合图”
},
打印选项：{
专栏：{
边界半径：5
},
系列：{
标记：{
已启用：false
}
}
},
xAxis：{
类别：[“PU”、“EK”、“EY”、“BR”、“MS”、“DL”、“JL”、“BA”、“NZ”、“CV”]
},
标签：{
项目：[
{
//html:‘水果总消费量’，
风格：{
左：“50px”，
顶部：“18px”，
颜色：
//主题
（Highcharts.defaultOptions.title.style&&
Highcharts.defaultOptions.title.style.color）||
“黑色”
}
}
]
},
系列：[
{
//最高：0，
点宽度：7，
键入：“列”，
名称：“TP”，
线宽：8，
数据：[10,45,15,95,10100,75,20,66,55]
},
{
键入：“列”，
名称：“1S”，
点宽度：7，
数据：[13,25,50,75,100,60,25,50,75,100]，
//亚克斯：1
},
{
键入：“列”，
名称：“1A”，
点宽度：7，
数据：[13,20,50,75,100,40,28,51,95,100]，
//亚克斯：1
},
{
键入：“行”，
名称：“LYTP”，
数据：[10,10，空，80,80，空，90,90，空，103103]，
//dashStyle：“longdash”，
标记：{
线宽：2，
lineColor:Highcharts.getOptions（）.Color[1]，
填充颜色：“浅蓝色”
}
},
{
//键入“pie”，
//名称：“总消耗量”，
中间：[100,80]，
尺码：100，
showInLegend:false，
数据标签：{
已启用：false
}
}
]
});
.highcharts-strong{
字体大小：粗体；
}
.highcharts图、.highcharts数据表{
最小宽度：320px；
最大宽度：600px；
保证金：1em自动；
}
.海图数据表{
字体系列：Verdana，无衬线；
边界塌陷：塌陷；
边框：1px实心#ebebebeb；
利润率：10px自动；
文本对齐：居中；
宽度：100%；
最大宽度：500px；
}
.highcharts数据表标题{
填充：1em 0；
字体大小：1.2米；
颜色：#555；
}
.海图数据表th{
字号：600；
填充：0.5em；
}
.highcharts数据表td、.highcharts数据表th、.highcharts数据表标题{
填充：0.5em；
}
.highcharts数据表thead tr、.highcharts数据表tr:n个子项（偶数）{
背景：#f8f8；
}
.highcharts数据表tr：悬停{
背景#f1f7ff；
}


时间轴图表用于将事件放置在时间轴上，
比如这个例子展示了主要的太空探索
1951年至1975年的事件。

在本例中，Highcharts中没有一个系列完全满足您的要求，但您可以轻松创建这样的系列。只需稍微修改列系列即可：

(function(H) {
    H.seriesType('jump-line', 'column', {
        height: 6
    }, {
        translate: function() {
            H.seriesTypes.column.prototype.translate.apply(this);

            this.points.forEach(function(point) {
                point.shapeArgs.height = this.options.height;
            }, this);
        }
    });
}(Highcharts));

Highcharts.chart('container', {
    ...,
    series: [..., {
        type: 'jump-line',
        pointPadding: 0,
        grouping: false,
        data: [4, 4, 4]
    }]
});


现场演示：

API参考：