带有HighCharts y轴的jQuery滑块范围

时间：2018-05-15 10:53:42

标签： javascript jquery highcharts

我正在尝试在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

提前致谢

1 个答案:

答案 0 :(得分：1)

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

  1. 更改单位后没有刷新滑块，在回调中加载图表时初始化滑块，但从未再次调用。所以min，max，values和slide都使用初始设置。 API REF

  2. 您已为所有3个系列设置了minRange: 1，这对于总范围小于1的第二个系列效果不佳，并导致滑块的行为不正常。

  3. 您有不设置startOnTick和endOnTick false，这会导致图表从tick跳到tick。

    4. 为了解决这些问题，我为滑块创建了一个函数，每次选择其他选项时都会调用该函数。我在第二个系列中将minRange设置为0.1，并且我明确地设置了滑块的步长。我也禁用了startOnTick和endOnTick。

    ＆＃13;
    ＆＃13; 
    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);
  });
});
    ＆＃13; 
    <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>
    ＆＃13;
    ＆＃13;
    ＆＃13;

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

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

相关问题
最新问题