Highcharts 如何在海图中显示角度数据系列？

我有一个数据集，其中序列值是以度为单位的角度（0到360）。是否可以在highcharts中绘制如图所示的图形（忽略绿色垂直线）？具体而言，如果以下任一标准成立，图表应避免直接连接两个数据点，即通过南部（180），而应通过北部（0/360）：

一个点低于90，下一个点高于270，或

一个点高于270，下一个点低于90

---

非常感谢您的帮助。

要做到这一点，我只需对数据进行预处理，创建两个系列，然后将它们绘制到同一个绘图上。一个系列适用于0-179，另一个系列适用于180-359

你也可以考虑一个散点图而不是一个线图，特别是如果你的数据在这个系列中的数据不如实例中的数据那么平滑。也就是说，一个数据点是10，下一个是110，然后下一个是12或者类似的

此代码为您提供了一个示例，数据由JSON提供，但您应该能够轻松地将其替换为您的数据：

<script type="text/javascript">
$(document).ready(function () {
    var chart = new Highcharts.Chart({
        title: {
            text: 'Wind Direction'
        },
        chart: {
            renderTo: 'dataplot4',
            borderWidth: 1,
            defaultSeriesType: 'scatter',
            zoomType: 'x'
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            series: {
                marker: {
                    radius: 3,
                    states: {
                        hover: {
                            enabled: true
                        }
                    }
                }
            }
        },
        xAxis: {
            type: 'datetime'
        },
        yAxis: {
            tickInterval: 90,
            min: 0,
            max: 360,
            title: {
                text: 'Wind Direction (deg)'
            }
        },
        tooltip: {
            crosshairs: true,
            formatter: function () {
                return '<b>' + Highcharts.dateFormat('%e. %b %Y, %H:00', this.x) + ' AKST</b> ' +
                        this.series.name + ': ' + this.y + ' deg';
            }
        },
        series: [
            {
                name: 'Wind Direction',
                data: JSON.parse("[" + wind_dir + "]"),
                pointStart: Number(startDateTime),
                pointInterval: 3600000
            }
        ]
    });
});
</script>

$（文档）.ready（函数（）{
var图表=新的Highcharts.图表({
标题：{
文字：‘风向’
},
图表：{
renderTo:'dataplot4'，
边框宽度：1，
defaultSeriesType:“散布”，
zoomType:'x'
},
图例：{
已启用：false
},
打印选项：{
系列：{
标记：{
半径：3，
国家：{
悬停：{
已启用：true
}
}
}
}
},
xAxis：{
键入：“日期时间”
},
亚克斯：{
时间间隔：90，
分:0,，
最高：360，
标题：{
文字：“风向（度）”
}
},
工具提示：{
十字准星：没错，
格式化程序：函数（）{
返回“”+Highcharts.dateFormat（“%e.%b%Y，%H:00'，this.x）+“AKST”+
this.series.name+'：'+this.y+'deg'；
}
},
系列：[
{
名称：‘风向’，
数据：JSON.parse（“[”+wind_dir+“]），
pointStart:编号（startDateTime），
点间距：3600000
}
]
});
});

我想我在某个地方有一个JSFIDLE，当我把它挖出来时，它会更新答案

---

编辑：这里有一把小提琴，它显示了正在运行的散点图

谢谢你的回复，但我真的需要连接这些点。我认为我的数据足够密集（间隔5分钟，总共288点）。正如您所提到的，一种折衷方法是分解该系列，但是如果两个值之间没有直线，并且两个值距离边界足够远，但是如果一个值从第一个值到第二个值，则逻辑上应该是通过北部（0/360）而不是南部（180），那么这看起来很奇怪。例如，第一个点约为70，第二个点约为290。我对问题进行了编辑，使其更加明确。哦，我只是想了一种可能的方法，如果我把系列分成几个部分，那就是添加一个偏离y轴范围的点。但这需要对源数据进行重大修改。显然需要一个更简单的过程来实现这一点……我不确定这是否是您所需要的，但添加空值以将系列拆分为几个部分如何？看看这个：