0

我有一个数据集，其中系列值是以度为单位的角度（0 到 360）。是否可以在 highcharts 中绘制类似于此处所示的图形（忽略绿色垂直线）？具体来说，如果满足以下任何条件，则图表应避免将两个数据点直接链接到穿过南方 (180) 的意义上，而应穿过北方 (0/360)：

  1. 一个点低于 90，下一个点高于 270，或；
  2. 一个点高于 270，下一个点低于 90。

任何帮助表示赞赏。

4

1 回答 1

0

我要做的是简单地预处理您的数据以创建两个系列，然后将它们都绘制到同一个图上。一个系列用于 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>

我想我在某个地方有一个 jsfiddle，当我挖掘它时会更新答案。

编辑：这是一个显示散点图的小提琴。http://jsfiddle.net/Reality_Extractor/pNFYL/

于 2013-04-06T03:53:52.023 回答