Диапазон слайдеров jQuery с осью Y HighCharts - PullRequest
Новая
       2

Диапазон слайдеров jQuery с осью Y HighCharts

0 голосов
/ 15 мая 2018

Я пытаюсь добавить ползунок диапазона jQuery на линейную диаграмму HighCharts для увеличения / уменьшения по вертикали. Вот как я это сделал 

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 голосов
/ 16 мая 2018

Существуют некоторые проблемы, которые приводят к тому, что ползунок не является гладким.

  1. Вы не обновляете ползунок после изменения единицы измерения, ползунок инициализируется при загрузке диаграммыв обратном вызове, но никогда не звонил снова.Так что min, max, values и slide, все используют начальные настройки. API REF

  2. Вы установили minRange: 1 для всех 3 серий, это плохо работает для второй серии, которая имеет общее количестводиапазон меньше 1 и приводит к тому, что ползунок ведет себя беспорядочно.

  3. У вас есть , а не , установите 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/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...