带有 HighCharts y 轴的 jQuery 滑块范围答案

【问题标题】：jQuery slider range with HighCharts y-Axis带有 HighCharts y 轴的 jQuery 滑块范围
【发布时间】：2023-03-22 01:44:01
【问题描述】：

我正在尝试在 HighCharts 折线图上添加一个 jQuery 滑块范围栏以垂直放大/缩小。这是我的做法

var ymax = 0.0;
var pSliderUnit = 0;
$(function() {
  $('#lineChart').highcharts({
    chart: {
      type: 'line',
      zoomType: 'xy'
    },
    title: {
      text: ''
    },
    credits: {
      enabled: false
    },
    xAxis: {
      type: 'datetime',
      reversed: true
    },
    yAxis: [{
        events: {
          afterSetExtremes: function(e) {
            $("#pSliderBar").slider("values", 0, e.min);
            $("#pSliderBar").slider("values", 1, e.max);
          }
        },
        minRange: 1,
        showEmpty: false,
        labels: {
          format: '{value}'
        },
        title: {
          text: '\xB5g/m\xB3'
        },
        plotLines: []
      },
      {
        events: {
          afterSetExtremes: function(e) {
            $("#pSliderBar").slider("values", 0, e.min);
            $("#pSliderBar").slider("values", 1, e.max);
          }
        },
        minRange: 1,
        showEmpty: false,
        labels: {
          format: '{value}'
        },
        title: {
          text: 'mtr/sec'
        },
        opposite: true,
        plotLines: []
      },
      {
        events: {
          afterSetExtremes: function(e) {
            $("#pSliderBar").slider("values", 0, e.min);
            $("#pSliderBar").slider("values", 1, e.max);
          }
        },
        minRange: 1,
        showEmpty: false,
        labels: {
          format: '{value}'
        },
        title: {
          text: 'degrees'
        },
        plotLines: []
      },
    ],
    series: [{
        type: 'spline',
        name: 'Value 1',
        yAxis: 0,
        tooltip: {
          valueSuffix: '\xB5g/m\xB3'
        },
        data: [
          [Date.UTC(2018, 4, 14, 16, 20, 0), 20.4],
          [Date.UTC(2018, 4, 14, 16, 30, 0), 17.6],
          [Date.UTC(2018, 4, 14, 16, 40, 0), 18.8],
          [Date.UTC(2018, 4, 14, 16, 50, 0), 18.9]
        ]
      },
      {
        type: 'spline',
        name: 'Value 2',
        yAxis: 0,
        tooltip: {
          valueSuffix: '\xB5g/m\xB3'
        },
        data: [
          [Date.UTC(2018, 4, 14, 16, 20, 0), 11.2],
          [Date.UTC(2018, 4, 14, 16, 30, 0), 10.5],
          [Date.UTC(2018, 4, 14, 16, 40, 0), 11.2],
          [Date.UTC(2018, 4, 14, 16, 50, 0), 10.9]
        ]
      },
      {
        type: 'spline',
        name: 'Value 3',
        yAxis: 0,
        tooltip: {
          valueSuffix: '\xB5g/m\xB3'
        },
        data: [
          [Date.UTC(2018, 4, 14, 16, 20, 0), 5.71],
          [Date.UTC(2018, 4, 14, 16, 30, 0), 5.77],
          [Date.UTC(2018, 4, 14, 16, 40, 0), 5.69],
          [Date.UTC(2018, 4, 14, 16, 50, 0), 5.91]
        ]
      },
      {
        type: 'spline',
        name: 'Value 4',
        yAxis: 0,
        tooltip: {
          valueSuffix: '\xB5g/m\xB3'
        },
        data: [
          [Date.UTC(2018, 4, 14, 16, 20, 0), 3.07],
          [Date.UTC(2018, 4, 14, 16, 30, 0), 3.04],
          [Date.UTC(2018, 4, 14, 16, 40, 0), 3.03],
          [Date.UTC(2018, 4, 14, 16, 50, 0), 3.03]
        ]
      },
      {
        type: 'spline',
        name: 'Wind Speed',
        yAxis: 1,
        tooltip: {
          valueSuffix: 'mtr/sec'
        },
        data: [
          [Date.UTC(2018, 4, 14, 16, 20, 0), 0.5],
          [Date.UTC(2018, 4, 14, 16, 30, 0), 0.4],
          [Date.UTC(2018, 4, 14, 16, 40, 0), 0.2],
          [Date.UTC(2018, 4, 14, 16, 50, 0), 0.1]
        ]
      },
      {
        type: 'spline',
        name: 'Wind Direction',
        yAxis: 2,
        tooltip: {
          valueSuffix: 'degrees'
        },
        data: [
          [Date.UTC(2018, 4, 14, 16, 20, 0), 170.0],
          [Date.UTC(2018, 4, 14, 16, 30, 0), 90.0],
          [Date.UTC(2018, 4, 14, 16, 40, 0), 130.0],
          [Date.UTC(2018, 4, 14, 16, 50, 0), 65.0]
        ]
      }
    ]
  }, function(chart) {
    $("#pSliderBar").slider({
      range: true,
      orientation: "vertical",
      min: chart.yAxis[pSliderUnit].min,
      max: chart.yAxis[pSliderUnit].max,
      values: [chart.yAxis[pSliderUnit].min, chart.yAxis[pSliderUnit].max],
      slide: function(event, ui) {
        chart.yAxis[pSliderUnit].setExtremes(ui.values[0], ui.values[1])
      }
    });
  });
  $('#selectSliderUnit').change(function() {
    console.log("value:" + this.value);
    pSliderUnit = this.value;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<table width="100%">
  <tr>
    <td width="95%">
      <div id="lineChart" style="min-width: 600px; height: 500px;"></div>
    </td>
    <td width="5%" valign="top" align="center">
      <select id="selectSliderUnit" style="width: 20px;">
        <option value="0">ug/m^3</option>
        <option value="1">mtr/sec</option>
        <option value="2">degrees</option>
      </select><br><br>
      <div id="pSliderBar" style="height: 400px;"></div>
    </td>
  </tr>
</table>

但有一些问题，它似乎无法正常工作。它需要在选择更改时刷新滑块范围。有时，当我隐藏这些行时，它会抛出 'Uncaught TypeError: Cannot read property 'toggleClass' of undefined' 异常。另一个问题是当放大滑块回到顶部/底部时。有人可以帮忙吗？

JSFiddle

提前致谢

【问题讨论】：

it does not seem to be working correctly 预期行为是什么，当前行为是什么？
选择更改时需要刷新滑块范围。
@Codeer 谢谢您，先生，您像“专家”一样提出了这个问题，但此后没有任何回应
即使您的评论中有答案，我也无法理解什么对您不起作用。
@AL̲̳I 您的回答并没有解决问题，就像上面提到的 ewolden 一样。另外，当我还没有时间坐下来时，我宁愿不回答答案。知道可能会有更多的人需要澄清，我已经要求它，因为人们可能需要时间来回答/编辑/详细说明。不用这么叫我，我只是想帮你。

标签： javascript jquery highcharts

【解决方案1】：

有一些问题导致这不是一个平滑的滑块。

您更改单位后没有刷新滑块，滑块在回调中加载图表时被初始化，但不再调用。所以min、max、values和slide，都使用初始设置。 API REF
您已为所有 3 个系列设置了 minRange: 1，这对于总范围小于 1 并导致滑块行为不正常的第二个系列效果不佳。
您没有设置startOnTick 和endOnTick false，这会导致图表从一个刻度跳到另一个刻度。

为了解决这些问题，我为滑块制作了一个函数，每次选择另一个选项时都会调用该函数。我在第二个系列中将 minRange 设置为 0.1，并明确设置了滑块的步长。我还禁用了 startOnTick 和 endOnTick。

var ymax = 0.0;
var pSliderUnit = 0;
$(function() {
  var chart = Highcharts.chart('lineChart', {
    chart: {
      type: 'line',
      zoomType: 'xy'
    },
    title: {
      text: ''
    },
    credits: {
      enabled: false
    },
    xAxis: {
      type: 'datetime',
      reversed: true
    },
    yAxis: [{
        startOnTick: false,
        endOnTick: false,
        events: {
          afterSetExtremes: function(e) {
            $("#pSliderBar").slider("values", [e.min, e.max]);
          }
        },
        minRange: 1,
        showEmpty: false,
        labels: {
          format: '{value}'
        },
        title: {
          text: '\xB5g/m\xB3'
        },
        plotLines: []
      },
      {
        startOnTick: false,
        endOnTick: false,
        events: {
          afterSetExtremes: function(e) {
            $("#pSliderBar").slider("values", [e.min, e.max]);
          }
        },
        minRange: 0.1,
        min: 0,
        max: 1,
        showEmpty: false,
        labels: {
          format: '{value}'
        },
        title: {
          text: 'mtr/sec'
        },
        opposite: true,
        plotLines: []
      },
      {
        startOnTick: false,
        endOnTick: false,
        events: {
          afterSetExtremes: function(e) {
            $("#pSliderBar").slider("values", [e.min, e.max]);
          }
        },
        minRange: 1,
        showEmpty: false,
        labels: {
          format: '{value}'
        },
        title: {
          text: 'degrees'
        },
        plotLines: []
      },
    ],
    series: [{
        type: 'spline',
        name: 'Value 1',
        yAxis: 0,
        tooltip: {
          valueSuffix: '\xB5g/m\xB3'
        },
        data: [
          [Date.UTC(2018, 4, 14, 16, 20, 0), 20.4],
          [Date.UTC(2018, 4, 14, 16, 30, 0), 17.6],
          [Date.UTC(2018, 4, 14, 16, 40, 0), 18.8],
          [Date.UTC(2018, 4, 14, 16, 50, 0), 18.9]
        ]
      },
      {
        type: 'spline',
        name: 'Value 2',
        yAxis: 0,
        tooltip: {
          valueSuffix: '\xB5g/m\xB3'
        },
        data: [
          [Date.UTC(2018, 4, 14, 16, 20, 0), 11.2],
          [Date.UTC(2018, 4, 14, 16, 30, 0), 10.5],
          [Date.UTC(2018, 4, 14, 16, 40, 0), 11.2],
          [Date.UTC(2018, 4, 14, 16, 50, 0), 10.9]
        ]
      },
      {
        type: 'spline',
        name: 'Value 3',
        yAxis: 0,
        tooltip: {
          valueSuffix: '\xB5g/m\xB3'
        },
        data: [
          [Date.UTC(2018, 4, 14, 16, 20, 0), 5.71],
          [Date.UTC(2018, 4, 14, 16, 30, 0), 5.77],
          [Date.UTC(2018, 4, 14, 16, 40, 0), 5.69],
          [Date.UTC(2018, 4, 14, 16, 50, 0), 5.91]
        ]
      },
      {
        type: 'spline',
        name: 'Value 4',
        yAxis: 0,
        tooltip: {
          valueSuffix: '\xB5g/m\xB3'
        },
        data: [
          [Date.UTC(2018, 4, 14, 16, 20, 0), 3.07],
          [Date.UTC(2018, 4, 14, 16, 30, 0), 3.04],
          [Date.UTC(2018, 4, 14, 16, 40, 0), 3.03],
          [Date.UTC(2018, 4, 14, 16, 50, 0), 3.03]
        ]
      },
      {
        type: 'spline',
        name: 'Wind Speed',
        yAxis: 1,
        tooltip: {
          valueSuffix: 'mtr/sec'
        },
        data: [
          [Date.UTC(2018, 4, 14, 16, 20, 0), 0.5],
          [Date.UTC(2018, 4, 14, 16, 30, 0), 0.4],
          [Date.UTC(2018, 4, 14, 16, 40, 0), 0.2],
          [Date.UTC(2018, 4, 14, 16, 50, 0), 0.1]
        ]
      },
      {
        type: 'spline',
        name: 'Wind Direction',
        yAxis: 2,
        tooltip: {
          valueSuffix: 'degrees'
        },
        data: [
          [Date.UTC(2018, 4, 14, 16, 20, 0), 170.0],
          [Date.UTC(2018, 4, 14, 16, 30, 0), 90.0],
          [Date.UTC(2018, 4, 14, 16, 40, 0), 130.0],
          [Date.UTC(2018, 4, 14, 16, 50, 0), 65.0]
        ]
      }
    ]
  }, Slider)

  function Slider(chart, pSliderUnit) {
    if (typeof pSliderUnit == 'undefined') {
      pSliderUnit = 0
    }
    $("#pSliderBar").slider({
      range: true,
      orientation: "vertical",
      min: Math.round(chart.yAxis[pSliderUnit].getExtremes().min * 100) / 100,
      max: Math.round(chart.yAxis[pSliderUnit].getExtremes().max * 100) / 100,
      step: (chart.yAxis[pSliderUnit].getExtremes().max  - chart.yAxis[pSliderUnit].getExtremes().min) / 100,
      values: [Math.round(chart.yAxis[pSliderUnit].getExtremes().min * 100) / 100, Math.round(chart.yAxis[pSliderUnit].getExtremes().max * 100) / 100],
      slide: function(event, ui) {
        chart.yAxis[pSliderUnit].setExtremes(ui.values[0], ui.values[1], true, false)
      }
    });
  };

  $('#selectSliderUnit').change(function() {
    console.log("value:" + this.value);
    Slider(chart, this.value);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<table width="100%">
  <tr>
    <td width="95%">
      <div id="lineChart" style="min-width: 600px; height: 500px;"></div>
    </td>
    <td width="5%" valign="top" align="center">
      <select id="selectSliderUnit" style="width: 20px;">
	<option value="0">ug/m^3</option><option value="1">mtr/sec</option><option value="2">degrees</option>
	</select><br><br>
      <div id="pSliderBar" style="height: 400px;"></div>
    </td>
  </tr>
</table>

还有一个我无法解决的问题，当您第一次设置最大滑块而不更改您正在调整的选项时，它会跳转。

工作示例： https://jsfiddle.net/ewolden/9aqnq71n/4/

【讨论】：

感谢代码的修改，非常感谢。还有一些问题，当我设置默认极端值时，您也提到了一个问题，滑块不起作用。谢谢