Блог

Главная - Вопросы по программированию - Как обновить мои диаграммы, построенные с помощью chart js, изменив ползунок диапазона?

Как обновить мои диаграммы, построенные с помощью chart js, изменив ползунок диапазона?

#javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

Я хочу обновить свою диаграмму с помощью ползунка диапазона. Ползунок диапазона обычно здесь означает ползунок времени, где я могу сдвинуть его и изменить время, и одновременно моя диаграмма также меняется. вот код, у меня есть ползунок, но при перемещении он не влияет на ось x моих диаграмм. Любая помощь высоко ценится. На данный момент ось x — это диапазон чисел, но в реальном времени мои 24 часа будут там.

 <div class="container-fluid">
  <div class="row">
    <div class="col-2"></div>
    <div class="col-4">
      <div class="form-group mt-3 mb-3">
        <label for="dataSet">Select Data</label>
        <select class="form-control" id="dataSet">
          <option id="opt1" value="1">All</option>
          <option id="opt2" value="2">Ambient</option>
          <option id="opt3" value="3">Booth</option>
        </select>
      </div>
    </div>
    <div class="col-4">
      <div class="form-group mt-3 mb-3">
        <label for="dataOption">Select Options</label>
        <select class="form-control" id="dataOption">
          <option id="dt1" value="1">All</option>
          <option id="dt2" value="2">Temperature</option>
          <option id="dt3" value="3">Humidity</option>
        </select>
      </div>
    </div>
    <div class="col-2"></div>
  </div>
  <div class="row">
    <div class="col-2"></div>
    <div class="col-8">
      <canvas id="myChart"></canvas>
    </div>
    <div class="col-2"></div>
  </div>
  <div class="row">
    <div class="col-2"></div>
    <div class="col-8">
      <canvas id="mixedChart"></canvas>
    </div>
    <div class="col-2"></div>
  </div>
</div>
<div id="time-range">
        <label>time</label>
        <input id="hour-slider"
               type="range" min="0" max="23"
        style="width: 800px;" value="1800" 
               </div>


$(document).ready(function () {
  var options = {
    type: "line",
    data: {
      labels: [10,20,30,40,50,60],
      datasets: [
        {
          label: "Ambient Temp",
          data: [4, 15, 16, 5, 30, 17],
          backgroundColor: 'rgba(75, 192, 192, 0.2)',
          borderWidth: 1,
          borderColor: 'rgba(75, 192, 192, 1)'
        },
        {
          label: "Ambient Humidity",
          data: [3, 10, 25, 8, 12, 4],
          backgroundColor: 'rgba(255, 99, 132, 0.2)',
          borderWidth: 1,
          borderColor: 'rgba(255, 99, 132, 1)'
        },
        {
          label: "Booth Temp",
          data: [2, 19,26,8,12,28],
          backgroundColor: 'rgba(153, 102, 255, 0.2)',
          borderWidth: 1,
          borderColor: 'rgba(153, 102, 255, 1)'
        },
        {
          label: "Booth Humidity",
          data: [1, 5,28,29,14,9],
          backgroundColor: 'rgba(255, 159, 64, 0.2)',
          borderWidth: 1,
          borderColor: 'rgba(255, 159, 64, 1)'
        }
      ]
    },
    options: {
      scales: {
        yAxes: [
          {
            ticks: {
              reverse: false
            }
          }
        ]
      }
    }
  };
  var ctx = document.getElementById("myChart").getContext("2d");
  var chart = new Chart(ctx, options);
  
  function graphViews(){
    var dataVal = $('#dataSet').val();
    var optVal = $('#dataOption').val();
    
    if(dataVal == "1" amp;amp; optVal == "1"){
      chart.getDatasetMeta(0).hidden = false;
      chart.getDatasetMeta(1).hidden = false;
      chart.getDatasetMeta(2).hidden = false;
      chart.getDatasetMeta(3).hidden = false;
      chart.update();
      chart.options.animation = true;
      chart.options.animation.duration = 1000;
      chart.options.animation.easing = 'linear';
      chart.options.animation.from = 1;
      chart.options.animation.to = 0;
    }
    else if(dataVal == "1" amp;amp; optVal == "2"){
      chart.getDatasetMeta(0).hidden = false;
      chart.getDatasetMeta(1).hidden = true;
      chart.getDatasetMeta(2).hidden = false;
      chart.getDatasetMeta(3).hidden = true;
      chart.update();
    }
    else if(dataVal == "1" amp;amp; optVal == "3"){
      chart.getDatasetMeta(0).hidden = true;
      chart.getDatasetMeta(1).hidden = false;
      chart.getDatasetMeta(2).hidden = true;
      chart.getDatasetMeta(3).hidden = false;
      chart.update();
    }
    else if(dataVal == "2" amp;amp; optVal == "1"){
      chart.getDatasetMeta(0).hidden = false;
      chart.getDatasetMeta(1).hidden = false;
      chart.getDatasetMeta(2).hidden = true;
      chart.getDatasetMeta(3).hidden = true;
      chart.update();
    }
    else if(dataVal == "2" amp;amp; optVal == "2"){
      chart.getDatasetMeta(0).hidden = false;
      chart.getDatasetMeta(1).hidden = true;
      chart.getDatasetMeta(2).hidden = true;
      chart.getDatasetMeta(3).hidden = true;
      chart.update();
    }
    else if(dataVal == "2" amp;amp; optVal == "3"){
      chart.getDatasetMeta(0).hidden = true;
      chart.getDatasetMeta(1).hidden = false;
      chart.getDatasetMeta(2).hidden = true;
      chart.getDatasetMeta(3).hidden = true;
      chart.update();
    }
    else if(dataVal == "3" amp;amp; optVal == "1"){
      chart.getDatasetMeta(0).hidden = true;
      chart.getDatasetMeta(1).hidden = true;
      chart.getDatasetMeta(2).hidden = false;
      chart.getDatasetMeta(3).hidden = false;
      chart.update();
    }
    else if(dataVal == "3" amp;amp; optVal == "2"){
      chart.getDatasetMeta(0).hidden = true;
      chart.getDatasetMeta(1).hidden = true;
      chart.getDatasetMeta(2).hidden = false;
      chart.getDatasetMeta(3).hidden = true;
      chart.update();
    }
    else if(dataVal == "3" amp;amp; optVal == "3"){
      chart.getDatasetMeta(0).hidden = true;
      chart.getDatasetMeta(1).hidden = true;
      chart.getDatasetMeta(2).hidden = true;
      chart.getDatasetMeta(3).hidden = false;
      chart.update();
    }
  };
  
  $('#dataSet').on('change', function() {
    graphViews();
  });
  
  $('#dataOption').on('change', function() {
    graphViews();
  });
  
});
$(".js-range-slider").ionRangeSlider({
    onFinish: function (myChart) {
        // Called then action is done and mouse is released
        console.log(myChart.to);
    },
});

Ответ №1:

Ваша первая проблема: вы никогда не выполняете ionRangeSlider, потому что не готовы к dom.

Вместо MyChart.для этого вам нужно использовать MyChart.from.

Для оси x, если вы хотите использовать метки, решение таково:

 $(".js-range-slider").ionRangeSlider({
    onFinish: function (myChart) {
        var newxLabels = chart.data.labels.map(function(e) {
            return  Math.round(( e * myChart.from) / 100);
        });
        chart.data.labels = newxLabels;
        chart.update();
    }
});

Фрагмент:

 $(document).ready(function () {
    var options = {
        type: "line",
        data: {
            labels: [10, 20, 30, 40, 50, 60],
            datasets: [
                {
                    label: "Ambient Temp",
                    data: [4, 15, 16, 5, 30, 17],
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    borderWidth: 1,
                    borderColor: 'rgba(75, 192, 192, 1)'
                },
                {
                    label: "Ambient Humidity",
                    data: [3, 10, 25, 8, 12, 4],
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    borderWidth: 1,
                    borderColor: 'rgba(255, 99, 132, 1)'
                },
                {
                    label: "Booth Temp",
                    data: [2, 19, 26, 8, 12, 28],
                    backgroundColor: 'rgba(153, 102, 255, 0.2)',
                    borderWidth: 1,
                    borderColor: 'rgba(153, 102, 255, 1)'
                },
                {
                    label: "Booth Humidity",
                    data: [1, 5, 28, 29, 14, 9],
                    backgroundColor: 'rgba(255, 159, 64, 0.2)',
                    borderWidth: 1,
                    borderColor: 'rgba(255, 159, 64, 1)'
                }
            ]
        },
        options: {
            scales: {
                yAxes: [
                    {
                        ticks: {
                            reverse: false
                        }
                    }
                ]
            }
        }
    };
    var ctx = document.getElementById("myChart").getContext("2d");
    var chart = new Chart(ctx, options);

    function graphViews() {
        var dataVal = $('#dataSet').val();
        var optVal = $('#dataOption').val();

        if (dataVal == "1" amp;amp; optVal == "1") {
            chart.getDatasetMeta(0).hidden = false;
            chart.getDatasetMeta(1).hidden = false;
            chart.getDatasetMeta(2).hidden = false;
            chart.getDatasetMeta(3).hidden = false;
            chart.update();
            chart.options.animation = true;
            chart.options.animation.duration = 1000;
            chart.options.animation.easing = 'linear';
            chart.options.animation.from = 1;
            chart.options.animation.to = 0;
        }
        else if (dataVal == "1" amp;amp; optVal == "2") {
            chart.getDatasetMeta(0).hidden = false;
            chart.getDatasetMeta(1).hidden = true;
            chart.getDatasetMeta(2).hidden = false;
            chart.getDatasetMeta(3).hidden = true;
            chart.update();
        }
        else if (dataVal == "1" amp;amp; optVal == "3") {
            chart.getDatasetMeta(0).hidden = true;
            chart.getDatasetMeta(1).hidden = false;
            chart.getDatasetMeta(2).hidden = true;
            chart.getDatasetMeta(3).hidden = false;
            chart.update();
        }
        else if (dataVal == "2" amp;amp; optVal == "1") {
            chart.getDatasetMeta(0).hidden = false;
            chart.getDatasetMeta(1).hidden = false;
            chart.getDatasetMeta(2).hidden = true;
            chart.getDatasetMeta(3).hidden = true;
            chart.update();
        }
        else if (dataVal == "2" amp;amp; optVal == "2") {
            chart.getDatasetMeta(0).hidden = false;
            chart.getDatasetMeta(1).hidden = true;
            chart.getDatasetMeta(2).hidden = true;
            chart.getDatasetMeta(3).hidden = true;
            chart.update();
        }
        else if (dataVal == "2" amp;amp; optVal == "3") {
            chart.getDatasetMeta(0).hidden = true;
            chart.getDatasetMeta(1).hidden = false;
            chart.getDatasetMeta(2).hidden = true;
            chart.getDatasetMeta(3).hidden = true;
            chart.update();
        }
        else if (dataVal == "3" amp;amp; optVal == "1") {
            chart.getDatasetMeta(0).hidden = true;
            chart.getDatasetMeta(1).hidden = true;
            chart.getDatasetMeta(2).hidden = false;
            chart.getDatasetMeta(3).hidden = false;
            chart.update();
        }
        else if (dataVal == "3" amp;amp; optVal == "2") {
            chart.getDatasetMeta(0).hidden = true;
            chart.getDatasetMeta(1).hidden = true;
            chart.getDatasetMeta(2).hidden = false;
            chart.getDatasetMeta(3).hidden = true;
            chart.update();
        }
        else if (dataVal == "3" amp;amp; optVal == "3") {
            chart.getDatasetMeta(0).hidden = true;
            chart.getDatasetMeta(1).hidden = true;
            chart.getDatasetMeta(2).hidden = true;
            chart.getDatasetMeta(3).hidden = false;
            chart.update();
        }
    };

    $('#dataSet').on('change', function () {
        graphViews();
    });

    $('#dataOption').on('change', function () {
        graphViews();
    });

    $(".js-range-slider").ionRangeSlider({
        onFinish: function (myChart) {
            var newxLabels = chart.data.labels.map(function(e) {
                return  Math.round(( e * myChart.from) / 100);
            });

            chart.data.labels = newxLabels;
            chart.update();
        }
    });

});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>

<div class="container-fluid">
    <div class="row">
        <div class="col-2"></div>
        <div class="col-4">
            <div class="form-group mt-3 mb-3">
                <label for="dataSet">Select Data</label>
                <select class="form-control" id="dataSet">
                    <option id="opt1" value="1">All</option>
                    <option id="opt2" value="2">Ambient</option>
                    <option id="opt3" value="3">Booth</option>
                </select>
            </div>
        </div>
        <div class="col-4">
            <div class="form-group mt-3 mb-3">
                <label for="dataOption">Select Options</label>
                <select class="form-control" id="dataOption">
                    <option id="dt1" value="1">All</option>
                    <option id="dt2" value="2">Temperature</option>
                    <option id="dt3" value="3">Humidity</option>
                </select>
            </div>
        </div>
        <div class="col-2"></div>
    </div>
    <div class="row">
        <div class="col-2"></div>
        <div class="col-8">
            <canvas id="myChart"></canvas>
        </div>
        <div class="col-2"></div>
    </div>
    <div class="row">
        <div class="col-2"></div>
        <div class="col-8">
            <canvas id="mixedChart"></canvas>
        </div>
        <div class="col-2"></div>
    </div>
</div>
<div id="time-range">
    <label>time</label>
    <input id="hour-slider"
           type="range" min="0" max="23"
           style="width: 800px;" value="1800" class="js-range-slider">
</div>

Комментарии:

1. Привет! Спасибо, здесь все прекрасно работает. Но когда я использую это в своем codpen.io , это не работает. Ты знаешь почему?

2. вы включили библиотеки, html, js корректно, как во фрагменте? Если это работает здесь, то нет причин, потому что это не может работать в jsfiddle, copen, браузере…….

3. Здравствуйте, да, я пробовал это в моем редакторе VS code, это работает 🙂 метки меняются, да. но диаграммы нет, и при перемещении их назад метки диаграммы становятся равными 0, они не похожи на повторное изменение..