34526


### 前提・実現したいこと

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

[code]

    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;
            }())
        }]
    });
[/code]

[code]

    .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;
    }
[/code]

[code]

    <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>
[/code]

### 試したこと

reversedにtrueを設定

[code]

    xAxis: {
        type: 'datetime',
        reversed: true,
    }
    
[/code]

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


CC BY-SA 4.0
2017-05-07T09:59:59.700
34515
2019-12-13T13:34:39.207
2020-06-17T08:14:45.997
-1
22993
question
highcharts
Highcharts 秒毎に更新する線グラフを右から表示したい


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

[code]

    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;
                }())
            }]
    
    });
    });
[/code]

[code]

    <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>
[/code]


CC BY-SA 4.0
2017-05-07T22:52:47.217
34526
2019-12-13T13:34:08.143
2019-12-13T13:34:08.143
32986
22993
34515
answer


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

[code]

    plotOptions: {
        spline: {
            animation: false
        }
    },
    
[/code]

とすれば良いです。

補足： [chart.animation](http://api.highcharts.com/highcharts/chart.animation) と
[plotOptions.spline.animation](http://api.highcharts.com/highcharts/plotOptions.spline.animation)
の API リファレンスに書いてあるように、初期アニメーションとそれからのアニメーションは設定が別になっています。


CC BY-SA 3.0
2017-05-08T01:58:11.173
34535
2017-05-08T01:58:11.173
19110
34515
answer