質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

2823閲覧

Chart.jsを使ったリアルタイム線グラフのY軸を逆にする方法を知りたい

akaoni1015

総合スコア12

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/02/07 09:51

編集2019/02/07 09:55

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

js

1var chartColors = { 2 red: 'rgb(255, 99, 132)', 3}; 4 5function randomScalingFactor() { 6 var min = 0; 7 var max = 100; 8 var a = Math.floor( Math.random() * (max + 1 - min) ) + min ; 9 return(a); 10} 11 12function onRefresh(chart) { 13 chart.config.data.datasets.forEach(function(dataset) { 14 dataset.data.push({ 15 x: randomScalingFactor(), 16 y: Date.now() 17 }); 18 }); 19} 20 21var color = Chart.helpers.color; 22var config = { 23 type: 'line', 24 data: { 25 datasets: [{ 26 label: 'グラフ', 27 backgroundColor: color(chartColors.red).alpha(0.5).rgbString(), 28 borderColor: chartColors.red, 29 fill:false 30 }] 31 }, 32 options: { 33 title: { 34 display: true, 35 text: '' 36 }, 37 scales: { 38 xAxes: [{ 39 type: 'linear', 40 display: true, 41 scaleLabel: { 42 display: true, 43 labelString: '' 44 } 45 }], 46 yAxes: [{ 47 type: 'realtime', 48 realtime: { 49 duration: 20000, 50 refresh: 1000, 51 delay: 2000, 52 onRefresh: onRefresh 53 }, 54 }] 55 } 56 } 57}; 58 59window.onload = function() { 60 var ctx = document.getElementById('myChart').getContext('2d'); 61 window.myChart = new Chart(ctx, config); 62};

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

投稿2019/02/18 11:33

bochan2

総合スコア2050

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問