0

シリーズ値が度単位の角度 (0 ～ 360) であるデータ セットがあります。ここに示されているようなグラフ(緑色の縦線は無視してください) をハイチャートにプロットすることは可能ですか? 具体的には、次の基準のいずれかが当てはまる場合、グラフは南 (180) を通過するという意味で 2 つのデータ ポイントを直接リンクすることを避け、代わりに北 (0/360) を通過する必要があります。

  1. ポイントが 90 を下回り、次のポイントが 270 を上回る、または;
  2. ポイントは 270 を超え、次のポイントは 90 を下回っています。

どんな助けでも大歓迎です。

4

1 に答える 1

0

これを実現するために行うことは、データを前処理して 2 つのシリーズを作成し、両方を同じプロットにプロットすることです。1 つのシリーズは 0 ～ 179 用で、もう 1 つのシリーズは 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 に答える