0

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

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

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);
};
<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/[email protected]/dist/chartjs-plugin-streaming.min.js"></script>

<canvas id="myChart"></canvas>

1

1 件の回答 1

1

結論からいうと、現在リリースされている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

3
  • そうなんですね。編集から回答まで色々とありがとうございました。
    – akaoni
    Commented 2019年2月9日 9:30
  • masterをビルドするとはどのようなことなのでしょうか。
    – akaoni
    Commented 2019年2月9日 9:31
  • 省略せずに書くと、GitHubのchartjs-plugin-streamingリポジトリのmasterブランチをビルドして生成されたchartjs-plugin-streaming.min.jsを使用する、となります。ビルド方法はリポジトリのREADMEに書かれている通りです。 github.com/nagix/chartjs-plugin-streaming/tree/…
    – harry0000
    Commented 2019年2月9日 10:01

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

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