Javascript nish：函数（myChart）{ var newxLabels=chart.data.labels.map（函数（e）{ 返回数学整数（（+e*myChart.from）/100）； }); chart.data.labels=newxLabels； c

nish：函数（myChart）{ var newxLabels=chart.data.labels.map（函数（e）{ 返回数学整数（（+e*myChart.from）/100）； }); chart.data.labels=newxLabels； chart.update（）； } }); });

选择数据
全部的
环境的
售货棚
选择选项
全部的
温度
湿度
时间

嗨！谢谢，这里的工作很好。但是，当我在codpen.io中使用它时，它不起作用。你知道为什么吗？你在代码片段中包括了libs、html、jscorreclty吗？如果它在这里工作，没有理由因为它不能在JSFIDLE、copen、浏览器中工作…….您好，是的，我在我的VS代码编辑器中尝试过，它正在工作：）标签正在更改，是的。但是图表不是这样，当它向后滑动时，图表的标签都变为0，它们不像再次改变。。

<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" && 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" && 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" && 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" && 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" && 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" && 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" && 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" && 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" && 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);
    },
});

$(".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();
    }
});