52660


こんにちは。  
JS初心者なのですが、Chart.js、chart.js
streaming、moment.jsを使ったリアルタイムグラフの線グラフの描画が、下記の写真のように、グラフが上から下に流れていくのですが、それを逆に下から上に流したいのですが、どうすれば良いでしょうか。  
[![グラフ](https://i.stack.imgur.com/bC04u.png)](https://i.stack.imgur.com/bC04u.png)

下記が私が書いたコードです。

[code]

    var chartColors = {
      red: 'rgb(255, 99, 132)',
    };
    
    function randomScalingFactor() {
      var min = 0;
      var max = 100;
      var a = Math.floor( Math.random() * (max + 1 - min) ) + min ;
      return(a);
    }
    
    function onRefresh(chart) {
      chart.config.data.datasets.forEach(function(dataset) {
        dataset.data.push({
          x: randomScalingFactor(),
          y: Date.now()
        });
      });
    }
    
    var color = Chart.helpers.color;
    var config = {
      type: 'line',
      data: {
        datasets: [{
          label: 'グラフ',
          backgroundColor: color(chartColors.red).alpha(0.5).rgbString(),
          borderColor: chartColors.red,
          fill:false
        }]
      },
      options: {
        title: {
          display: true,
          text: ''
        },
        scales: {
          xAxes: [{
            type: 'linear',
            display: true,
            scaleLabel: {
              display: true,
              labelString: ''
            }
          }],
          yAxes: [{
            type: 'realtime',
            realtime: {
              duration: 20000,
              refresh: 1000,
              delay: 2000,
              onRefresh: onRefresh
            },
          }]
        }
      }
    };
    
    window.onload = function() {
      var ctx = document.getElementById('myChart').getContext('2d');
      window.myChart = new Chart(ctx, config);
    };
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@1.7.1/dist/chartjs-plugin-streaming.min.js"></script>
    
    <canvas id="myChart"></canvas>
[/code]


CC BY-SA 4.0
2019-02-08T11:18:28.787
52646
2019-02-09T07:57:11.620
2019-02-08T14:09:08.253
3068
32103
question
javascript chart.js
Chart.jsを使ったリアルタイムの線グラフのY軸を逆にする方法を知りたい


結論からいうと、現在リリースされているchartjs-plugin-streaming 1.7.1では、`ticks { reverse: true
}`に対応していないため、できないようです。

1.8のリリースを待つか、reverseの対応が入っているmasterをビルドして利用するかの2択があるかと思います。

<https://github.com/nagix/chartjs-plugin-streaming/issues/51>

<https://github.com/nagix/chartjs-plugin-
streaming/blob/55e48bfc5e6675956f68aa81ed3b6020443d332c/src/scales/scale.realtime.js#L248-L250>


CC BY-SA 4.0
2019-02-09T07:57:11.620
52660
2019-02-09T07:57:11.620
3068
52646
answer