1

前提・実現したいこと

Highchartsで、秒毎に更新する線グラフを右から表示したいです。
左側から表示させることはできるのですが、
右側から表示させていくことはできますでしょうか。

Highcharts.chart('container', {
    chart: {
        type: 'spline',
        animation: Highcharts.svg, // don't animate in old IE
        marginRight: 10,
        events: {
            load: function () {

                // set up the updating of the chart each second
                var series = this.series[0];
                setInterval(function () {
                    var x = (new Date()).getTime(), // current time
                        y = Math.random();
                    series.addPoint([x, y], true, true);
                }, 1000);
            }
        }
    },

    time: {
        useUTC: false
    },

    title: {
        text: 'Live random data'
    },

    accessibility: {
        announceNewData: {
            enabled: true,
            minAnnounceInterval: 15000,
            announcementFormatter: function (allSeries, newSeries, newPoint) {
                if (newPoint) {
                    return 'New point added. Value: ' + newPoint.y;
                }
                return false;
            }
        }
    },

    xAxis: {
        type: 'datetime',
        tickPixelInterval: 150
    },

    yAxis: {
        title: {
            text: 'Value'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },

    tooltip: {
        headerFormat: '<b>{series.name}</b><br/>',
        pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}'
    },

    legend: {
        enabled: false
    },

    exporting: {
        enabled: false
    },

    series: [{
        name: 'Random data',
        data: (function () {
            // generate an array of random data
            var data = [],
                time = (new Date()).getTime(),
                i;

            for (i = -19; i <= 0; i += 1) {
                data.push({
                    x: time + i * 1000,
                    y: Math.random()
                });
            }
            return data;
        }())
    }]
});
.highcharts-figure, .highcharts-data-table table {
  min-width: 320px; 
  max-width: 800px;
  margin: 1em auto;
}

#container {
  height: 400px;
}

.highcharts-data-table table {
  font-family: Verdana, sans-serif;
  border-collapse: collapse;
  border: 1px solid #EBEBEB;
  margin: 10px auto;
  text-align: center;
  width: 100%;
  max-width: 500px;
}
.highcharts-data-table caption {
  padding: 1em 0;
  font-size: 1.2em;
  color: #555;
}
.highcharts-data-table th {
  font-weight: 600;
  padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
  padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
  background: #f8f8f8;
}
.highcharts-data-table tr:hover {
  background: #f1f7ff;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Chart showing data updating every second, with old data being removed.
    </p>
</figure>

試したこと

reversedにtrueを設定

xAxis: {
    type: 'datetime',
    reversed: true,
}

描画後は左に追加されますが、初期表示時は左側から右側へ点が追加されたままです。
初期表示時に右側から点を左側へ表示していきたいです。

3
  • for (i = -19; ... の部分の y: Math.random()y: null に変更するという方法があるかと思います。ただ、この方法ですと初期データはプロットされません。また、yrange を適切に設定しておく方が良いかと思います(yAxis: {..., min: 0.0, max: 1.0, ...})。jsfiddle.net/jq5g32yk
    – user39889
    2017年5月7日 14:35
  • 2
    回答ありがとうございます。アドバイスを参考にして、実現することができました。jsfiddle
    – tetsuya
    2017年5月7日 22:23
  • マルチポスト teratail.com/questions/75223
    – htb
    2017年5月9日 0:03

2 件の回答 2

1

初期データのプロットが必要無いなら、初期アニメーションを無効にしてしまうという方法もあります。具体的には

plotOptions: {
    spline: {
        animation: false
    }
},

とすれば良いです。

補足: chart.animationplotOptions.spline.animation の API リファレンスに書いてあるように、初期アニメーションとそれからのアニメーションは設定が別になっています。

1

解決できており、
実現できたコードを共有いたします。

let weekdate = ["2016-07-11","2016-07-18","2016-07-27","2016-08-01","2016-08-08","2016-08-15","2016-08-22",
                "2016-08-29","2016-09-05","2016-09-12","2016-09-19","2016-09-26"];  
weekdate.reverse();

var cnt =0;
$(document).ready(function () {
//     Highcharts.setOptions({
//        global: {
//            useUTC: false
//        }
//    });
     
    Highcharts.chart('container', {
        chart: {
            type: 'spline',
            animation: Highcharts.svg, 
            marginRight: 10
            ,events: {
                load: function () {
                    // set up the updating of the chart each second
                    var series = this.series[0];
                    setInterval(function () {

											if (cnt > 11)  return;
												var x = cnt, // current time
                            y = Math.random();
                        series.addPoint([x, y], true, false);
                      cnt = cnt +1;
                    }, 1000);
                }
            }
        },
        title: {
            text: 'Live random data'
        },
        xAxis: {
            reversed: true,
            tickPixelInterval: 150,
            categories: weekdate
            },
        yAxis: {
            title: {
                text: 'Value'
            },
            min: 0.0,
            max: 1.0,
             plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        legend: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        series: [{
            data: (function () {
                var data = [];
                var i;

              for (i = 11; i >= 0; i--) {
                    data.push({
                        x: i,
                        y: null
                    });
                }

								return data;
            }())
        }]

});
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。