javascript - 带有 HighCharts y 轴的 jQuery slider 范围

标签 javascript jquery highcharts

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

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>

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

<强> JSFiddle

提前致谢

最佳答案

存在一些问题导致 slider 不平滑。

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

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

  3. 您未设置startOnTick和endOnTickfalse，这会导致图表从勾勾勾。

为了解决这些问题，我为 slider 创建了一个函数，每次选择另一个选项时都会调用该函数。我在第二个系列中将 minRange 设置为 0.1，并明确设置 slider 的步长。我还禁用了 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>

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

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

关于javascript - 带有 HighCharts y 轴的 jQuery slider 范围，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50348414/

上一篇：javascript - 如何在没有 Kibana 的情况下从 AWS 中的 ElasticSearch 访问数据？

下一篇：javascript - 如何与 ajax 调用并行运行进度条(每 x 秒增加 %)？

相关文章：

javascript - 在 JavaScript 中输入计时器

php - 测试不安全的结帐页面

javascript - 将方法应用于变量

javascript - jQuery获取数组的特定属性

jquery - jqGrid - 如何在编辑表单中隐藏字段

javascript - 如何显示 x 轴 Highcharts 的第一个和最后一个标签

javascript - JsTree检查节点

php - 如何使用社交网络帐户或其他网站登录？

javascript - 在下载之前捕获 Highcharts 客户端导出响应

javascript - 来自 php json 的 highchart feed 数据

©2024 IT工具网  联系我们