Реализация ползунка для дат по оси x не работает корректно на высоких диаграммах

ProgramBox

Реализация ползунка для дат по оси x не работает корректно на высоких диаграммах

Post author:admin
Запись опубликована:17 января, 2022
Post category:Вопросы по программированию

#javascript #jquery #jquery-ui #highcharts #linechart

Вопрос:

Мне нужно добавить ползунок к моей линейной диаграмме, который позволит пользователю перейти к конкретным датам по оси x. У меня уже есть слайдер, добавленный на диаграмму, но по какой-то причине он не работает должным образом, и я не могу понять, в чем проблема. Может кто-нибудь, пожалуйста, помочь?

https://jsfiddle.net/samwhite/t5sabeyv/1/

 afterSetExtremes: function(e) {
                        $("#slider-range").slider("values", 0, 1975   e.min);
                        $("#slider-range").slider("values", 1, 1975   e.max);
                        $("#year").val(Math.round(e.min   1975)  
                            " - "   Math.round(e.max   1975));
                    }

$("#slider-range").slider({
      range: true,
      min: 1975,
      max: 2020,
      values: [1975, 2020],
      slide: function(event, ui) {
        $("#year").val(ui.values[0]   " - "   ui.values[1]);
        chart.xAxis[0].setExtremes(ui.values[0] - 1975, ui.values[1] - 1975)
      }
    });
    $("#year").val($("#slider-range").slider("values", 0)  
      " - "   $("#slider-range").slider("values", 1));

Вот пример того же поведения, которого я пытаюсь достичь
https://jsfiddle.net/uvat8u05/27/

Буду признателен за любую помощь.

Ответ №1:

Вам нужно использовать Date.UTC , чтобы установить новый интервал внутри вашего графика .Таким образом , вы можете обновить свой код внутри функции слайдера, т. е. :

 slide: function(event, ui) {
         $("#amount").val(ui.values[0]   " - "   ui.values[1]);
        chart.xAxis[0].setExtremes(Date.UTC(ui.values[0] ,0,1),Date.UTC(ui.values[1] ,0,1) )            
 }

Затем вы , где диаграмма ошибок не определена, поэтому у меня есть доступ this.axis.chart к сериям и подсказкам .

Рабочий Код :

 $(function() {
  let result = {
    "data": [
      [31536000000.0, 63.4],
      [34214400000.0, 63.6],
      [36633600000.0, 62.0],
      [39312000000.0, 60.8],
      [41904000000.0, 60.2],
      [44582400000.0, 63.0],
      [47174400000.0, 59.6],
      [49852800000.0, 51.3],
      [52531200000.0, 46.5],
      [55123200000.0, 44.4],
      [57801600000.0, 43.2],
      [60393600000.0, 50.2],
      [63072000000.0, 48.9],
      [65750400000.0, 48.0],
      [68256000000.0, 48.9],
      [70934400000.0, 49.9],
      [73526400000.0, 51.1],
      [76204800000.0, 50.7],
      [78796800000.0, 51.7],
      [81475200000.0, 51.4],
      [84153600000.0, 55.4],
      [86745600000.0, 50.7],
      [89424000000.0, 52.2],
      [92016000000.0, 66.0],
      [94694400000.0, 63.2],
      [97372800000.0, 64.7],
      [99792000000.0, 62.6],
      [102470400000.0, 66.0],
      [105062400000.0, 81.9],
      [128908800000.0, 121.3],
      [131328000000.0, 119.9],
      [134006400000.0, 105.8],
      [136598400000.0, 107.6],
      [139276800000.0, 115.0],
      [141868800000.0, 126.9],
      [144547200000.0, 150.0],
      [147225600000.0, 139.3],
      [149817600000.0, 150.5],
      [152496000000.0, 142.2],
      [155088000000.0, 142.8],
      [157766400000.0, 132.3],
      [160444800000.0, 123.6],
      [162864000000.0, 116.4],
      [165542400000.0, 113.3],
      [233971200000.0, 88.3],
      [236563200000.0, 81.6],
      [239241600000.0, 73.2],
      [241920000000.0, 73.0],
      [244512000000.0, 71.8],
      [247190400000.0, 84.3],
      [249782400000.0, 87.3],
      [252460800000.0, 87.3],
      [255139200000.0, 87.7],
      [257558400000.0, 93.5],
      [260236800000.0, 102.0],
      [262828800000.0, 100.6],
      [265507200000.0, 99.9],
      [268099200000.0, 92.7],
      [270777600000.0, 88.3],
      [273456000000.0, 85.3],
      [276048000000.0, 87.5],
      [278726400000.0, 90.1],
      [281318400000.0, 88.9],
      [283996800000.0, 90.1],
      [286675200000.0, 92.9],
      [289094400000.0, 94.5],
      [291772800000.0, 100.2],
      [294364800000.0, 104.2],
      [297043200000.0, 106.6],
      [299635200000.0, 121.3],
      [302313600000.0, 113.0],
      [304992000000.0, 109.3],
      [307584000000.0, 111.4],
      [336614400000.0, 138.1],
      [339206400000.0, 137.6],
      [341884800000.0, 132.8],
      [344476800000.0, 136.8],
      [347155200000.0, 142.8],
      [349833600000.0, 137.9],
      [352252800000.0, 136.7],
      [354931200000.0, 138.0],
      [357523200000.0, 135.9],
      [360201600000.0, 136.7],
      [362793600000.0, 139.6],
      [365472000000.0, 127.0],
      [368150400000.0, 110.2],
      [370742400000.0, 106.8],
      [373420800000.0, 102.2],
      [376012800000.0, 96.3],
      [378691200000.0, 104.8],
      [381369600000.0, 103.9],
      [383788800000.0, 104.7],
      [386467200000.0, 106.8],
      [389059200000.0, 110.2],
      [391737600000.0, 108.9],
      [394329600000.0, 106.8],
      [397008000000.0, 97.2],
      [399686400000.0, 83.7],
      [402278400000.0, 82.9],
      [404956800000.0, 94.1],
      [407548800000.0, 95.9],
      [410227200000.0, 98.7],
      [412905600000.0, 111.7],
      [415324800000.0, 115.8],
      [418003200000.0, 127.1],
      [420595200000.0, 128.6],
      [423273600000.0, 130.9],
      [425865600000.0, 130.6],
      [428544000000.0, 141.8],
      [431222400000.0, 141.1],
      [578448000000.0, 81.3],
      [581126400000.0, 102.4],
      [583718400000.0, 115.5],
      [586396800000.0, 113.4],
      [589075200000.0, 112.8],
      [591667200000.0, 114.4],
      [594345600000.0, 104.2],
      [596937600000.0, 106.4],
      [599616000000.0, 113.0],
      [602294400000.0, 108.7],
      [604713600000.0, 111.6],
      [607392000000.0, 106.9],
      [609984000000.0, 111.1],
      [612662400000.0, 103.1],
      [615254400000.0, 102.4],
      [617932800000.0, 94.8],
      [620611200000.0, 94.7],
      [623203200000.0, 91.8],
      [625881600000.0, 95.9],
      [628473600000.0, 94.2],
      [631152000000.0, 93.9],
      [633830400000.0, 96.9],
      [636249600000.0, 99.2],
      [638928000000.0, 108.8],
      [641520000000.0, 113.5],
      [644198400000.0, 116.4],
      [646790400000.0, 112.6],
      [649468800000.0, 100.2],
      [652147200000.0, 94.9],
      [654739200000.0, 90.8],
      [873072000000.0, 106.2],
      [875664000000.0, 109.5],
      [878342400000.0, 106.7],
      [880934400000.0, 107.9],
      [883612800000.0, 106.3],
      [886291200000.0, 106.7],
      [888710400000.0, 109.2],
      [891388800000.0, 98.4],
      [893980800000.0, 96.7],
      [896659200000.0, 92.4],
      [899251200000.0, 89.8],
      [901929600000.0, 80.2],
      [904608000000.0, 72.5],
      [907200000000.0, 80.5],
      [909878400000.0, 84.1],
      [912470400000.0, 83.6],
      [915148800000.0, 83.7],
      [917827200000.0, 84.5],
      [920246400000.0, 84.7],
      [922924800000.0, 83.2],
      [925516800000.0, 85.5],
      [928195200000.0, 81.7],
      [930787200000.0, 67.3],
      [933465600000.0, 79.2],
      [936144000000.0, 72.7],
      [938736000000.0, 68.7],
      [941414400000.0, 74.4],
      [944006400000.0, 73.2],
      [946684800000.0, 77.1],
      [949363200000.0, 82.8],
      [951868800000.0, 87.8],
      [954547200000.0, 83.6],
      [957139200000.0, 87.7],
      [959817600000.0, 76.1],
      [962409600000.0, 65.3],
      [965088000000.0, 61.7],
      [967766400000.0, 65.5],
      [970358400000.0, 71.9],
      [973036800000.0, 78.3],
      [975628800000.0, 78.9],
      [978307200000.0, 83.8],
      [980985600000.0, 77.2],
      [983404800000.0, 81.6],
      [986083200000.0, 78.6],
      [988675200000.0, 74.3],
      [991353600000.0, 72.4],
      [993945600000.0, 79.2],
      [996624000000.0, 83.0],
      [999302400000.0, 80.8],
      [1001894400000.0, 75.8],
      [1004572800000.0, 77.5],
      [1422748800000.0, 152.9],
      [1425168000000.0, 152.8],
      [1427846400000.0, 149.8],
      [1430438400000.0, 145.1],
      [1433116800000.0, 145.1],
      [1435708800000.0, 165.5],
      [1438387200000.0, 148.4],
      [1441065600000.0, 149.5],
      [1443657600000.0, 147.2],
      [1446336000000.0, 141.0],
      [1448928000000.0, 148.4],
      [1451606400000.0, 140.3],
      [1454284800000.0, 141.5],
      [1456790400000.0, 143.9],
      [1459468800000.0, 141.9],
      [1462060800000.0, 145.9],
      [1464739200000.0, 168.2],
      [1467331200000.0, 135.0],
      [1470009600000.0, 124.7],
      [1472688000000.0, 122.1],
      [1475280000000.0, 125.5],
      [1477958400000.0, 128.8],
      [1480550400000.0, 134.9],
      [1483228800000.0, 136.5],
      [1485907200000.0, 142.4],
      [1488326400000.0, 140.0],
      [1491004800000.0, 139.9],
      [1493596800000.0, 140.8],
      [1496275200000.0, 143.2],
      [1498867200000.0, 149.9],
      [1501545600000.0, 132.1],
      [1504224000000.0, 127.7],
      [1506816000000.0, 126.7],
      [1509494400000.0, 125.2],
      [1512086400000.0, 128.8],
      [1514764800000.0, 132.7],
      [1517443200000.0, 141.1],
      [1519862400000.0, 148.2],
      [1522540800000.0, 148.4],
      [1525132800000.0, 154.2],
      [1527811200000.0, 144.9],
      [1530403200000.0, 132.2],
      [1533081600000.0, 137.6],
      [1535760000000.0, 133.6],
      [1538352000000.0, 133.8],
      [1541030400000.0, 139.5],
      [1543622400000.0, 145.6],
      [1546300800000.0, 140.9],
      [1548979200000.0, 146.2],
      [1551398400000.0, 140.3],
      [1554076800000.0, 141.0],
      [1593561600000.0, 127.2],
      [1596240000000.0, 120.2],
      [1598918400000.0, 140.5],
      [1601510400000.0, 152.0],
      [1604188800000.0, 166.6],
      [1606780800000.0, 170.7],
      [1609459200000.0, 209.0],
      [1612137600000.0, 224.8],
      [1614556800000.0, 222.8],
      [1617235200000.0, 239.5]
    ]
  };
  var $report = $('#report');
  var chart = $('#corn_container').highcharts({
    chart: {
      zoomType: 'x'
    },
    colors: ['#00429d'],
    title: {
      text: "Producer Price Index For Corn Products",
      align: 'left',
      style: {
        color: '#2B2B2B',
        fontSize: '20px',
        fontWeight: 'bold',
      }
    },
    subtitle: {
      text: 'Source: U.S. Bureau of Labor Statistics',
      style: {
        color: '#2B2B2B'
      },
      align: 'left'
    },
    credits: {
      enabled: false
    },
    xAxis: {
      type: 'datetime',
      min: Date.UTC(1970, 1, 1),
      max: Date.UTC(2021, 12, 1),
      tickInterval: 12 * 30 * 24 * 3600 * 1000 * 5,
      labels: {
        style: {
          color: '#2B2B2B'
        }
      },
      plotBands: [{
          color: '#C7EA46',
          from: Date.UTC(2020, 2, 1),
          to: Date.UTC(2050, 1, 1)
        },
        {
          color: '#DEE8E9',
          from: Date.UTC(1973, 11, 1),
          to: Date.UTC(1975, 2, 1),
          events: {
            click: function(e) {
              $report.html(e.type)
            },
            mouseover: function(e) {
       
       //use it like this ..to access series and chart..
       this.axis.chart.tooltip.refresh(this.axis.chart.series[1].points[2]);
              $report.html(`Recession period from November 1973 to February 1975`)
            },
            mouseout: function(e) {
              $report.html('')
            }
          },
        },
        {
          color: '#DEE8E9',
          from: Date.UTC(1980, 1, 1),
          to: Date.UTC(1980, 7, 1),
          events: {
            click: function(e) {
              $report.html(e.type)
            },
            mouseover: function(e) {
               this.axis.chart.tooltip.refresh(this.axis.chart.series[1].points[2]);
              $report.html(`Recession period from January 1980 to July 1980`)
            },
            mouseout: function(e) {
              $report.html('')
            }
          },
        },
        {
          color: '#DEE8E9',
          from: Date.UTC(1981, 8, 1),
          to: Date.UTC(1982, 11, 1),
          events: {
            click: function(e) {
              $report.html(e.type)
            },
            mouseover: function(e) {
              this.axis.chart.tooltip.refresh(this.axis.chart.series[1].points[2]);
              $report.html(`Recession period from August 1981 to November 1982`)
            },
            mouseout: function(e) {
              $report.html('')
            }
          },
        }, ,
        {
          color: '#DEE8E9',
          from: Date.UTC(1990, 7, 1),
          to: Date.UTC(1991, 3, 1),
          events: {
            click: function(e) {
              $report.html(e.type)
            },
            mouseover: function(e) {
              this.axis.chart.tooltip.refresh(this.axis.chart.series[1].points[2]);
              $report.html(`Recession period from July 1990 to March 1991`)
            },
            mouseout: function(e) {
              $report.html('')
            }
          },
        },
        {
          color: '#DEE8E9',
          from: Date.UTC(2001, 4, 1),
          to: Date.UTC(2001, 11, 1),
          events: {
            click: function(e) {
              $report.html(e.type)
            },
            mouseover: function(e) {
              this.axis.chart.tooltip.refresh(this.axis.chart.series[1].points[2]);
              $report.html(`Recession period from April 2001 to November 2001`)
            },
            mouseout: function(e) {
              $report.html('')
            }
          },
        },
        {
          color: '#DEE8E9',
          from: Date.UTC(2007, 12, 1),
          to: Date.UTC(2009, 6, 1),
          events: {
            click: function(e) {
              $report.html(e.type)
            },
            mouseover: function(e) {
              this.axis.chart.tooltip.refresh(this.axis.chart.series[1].points[2]);
              $report.html(`Recession period from December 2007 to June 2009`)
            },
            mouseout: function(e) {
              $report.html('')
            }
          },
        }
      ],
      events: {
        afterSetExtremes: function(e) {
   //i don't thnk this needed
        }
      },
      minRange: 1,
      tickColor: '#2B2B2B',
      lineColor: '#2B2B2B',
      lineWidth: 1
    },
    yAxis: [{
      title: {
        text: 'Index 1982=100',
        style: {
          color: '#2B2B2B'
        }
      },
      min: 40,
      max: 320,
      tickInterval: 40,
      labels: {
        style: {
          color: '#2B2B2B'
        }
      },
      showFirstLabel: true,
      gridLineWidth: 0,
      minorGridLineWidth: 0,
      lineColor: '#2B2B2B',
      lineWidth: 1
    }],
    legend: {
      enabled: false,
      align: 'center',
      verticalAlign: 'bottom',
      borderWidth: 0
    },
    tooltip: {
      shared: true,
      crosshairs: true,
      outside: true,
      backgroundColor: '#fff',
      formatter: function() {
        var date = new Date(this.x);
        var formattedDate = moment(date).format('MMM YYYY');
        return '<strong>'   formattedDate   ':</strong> '   this.y;
      }
    },
    plotOptions: {
      series: {
        cursor: 'pointer',
        marker: {
          lineWidth: 1
        }
      }
    },
    series: [{
        name: '',
        data: result.data
      },
      {
        name: "hiddenSeries",
        visible: false,
        color: '#4572A7',
        data: [0, 0, 150, 0, 0, 0, 0, 0],
        pointStart: Date.UTC(2010, 0, 1),
        pointInterval: 24 * 3600 * 1000
      }
    ]
  }, function(chart) {

    $("#slider-range").slider({
      range: true,
      min: 1975,
      max: 2020,
      values: [1975, 2020],
      slide: function(event, ui) {
        $("#amount").val(ui.values[0]   " - "   ui.values[1]);
        chart.xAxis[0].setExtremes(Date.UTC(ui.values[0], 0, 1), Date.UTC(ui.values[1], 0, 1)) ///use data.utc to set extreme
      }
    });
    $("#amount").val($("#slider-range").slider("values", 0)  
      " - "   $("#slider-range").slider("values", 1));

  });
});

 <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.2/themes/ui-lightness/jquery-ui.css">
<div class="charting_div">
  <figure class="highcharts-figure">
    <div id="corn_container"></div>
    <div id="report"></div>
    <div style="margin: 20px 0px 0px 60px">


      <p>
        <label for="amount">Year(s):</label>
        <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
      </p>

      <div id="slider-range"></div>
    </div>
  </figure>
</div>

Вопрос:

Ответ №1:

Комментарии:

Вам также может понравиться

Как восстановить сообщения WhatsApp?

Конвертируйте Excel в CSV и игнорируйте пустые ячейки и выпадающий список в C#

Ограничить доступ Github к одному репозиторию по ssh и https URL