グラフライブラリとスライダーを連携したいがやり方が分からない。

Question

chart.jsとnoUiSliderを連携し、スライダーの操作によってchart.jsも動的に変更したいです。
それぞれを表現するコードは分かるのですが、両者を連携するコードが分かりません。
分かる方がいれば教えて頂きたいです。

Answer 1

とりあえず、動くコードから
(html/cssは変更なしです)
変更点などはコメント入れています

//スライダーで変更したい値を外側で変数化
let data_sauce = [20, 26, 12, 43, 33, 21, 29];
let labels_sauce = ["1月", "2月", "3月", "4月", "5月", "6月", "7月"];

var ctx = document.getElementById("Chart").getContext('2d');
var ChartDemo = new Chart(ctx, {
   type: 'line',
   data: {
      labels: labels_sauce, //ココで参照
      datasets: [
        {
           label: "サンプル",
           borderColor: 'rgb(255, 0, 0)',
           data: data_sauce, //ココで参照
        },
      ]
   },
   options: {
      responsive: true,
   }
});

var range = document.getElementById('range');
noUiSlider.create(range, {
  start: [ 1, 7 ],
  step: 1, 
  margin: 1, 
  connect: true, 
  direction: 'ltr', 
  orientation: 'horizontal',
  behaviour: 'tap-drag', 
  range: {
    'min': 1,//最小値を1に変更しています
    'max': 7
  },
  pips: { 
    mode: 'steps', 
    density: 5
  } 
});

//スライダーのセットイベントにイベントバインド
range.noUiSlider.on('set.one', function (e) {
  //イベントの引数として、スライダーの値が取れるようです。
  let min = e[0]-1; //下の値(配列に合わせるために-1しています)
  let max = e[1]; //上の値(こちらはsliceの仕様に合わせて-1しない)
  ChartDemo.data.data = data_sauce.slice(min, max);
  ChartDemo.data.labels = labels_sauce.slice(min, max);
  ChartDemo.update();
});

初めて使ったライブラリなので、正しい書き方かは定かではありませんが・・・

noUiSliderのイベントについては、
https://refreshless.com/nouislider/events-callbacks/

Chart.jsの更新については、
https://misc.0o0o.org/chartjs-doc-ja/developers/updates.html

のドキュメントを確認するといいと思います。