Поменять дату по нажатию на button

142
02 октября 2019, 08:50

Есть график на котором можно выбирать диапазон например с 2010-1-01 по 2020-2-02 . Я попытался сделать чтоб по нажатию на кнопку забивалась конкретная дата типа с 2015-1-10 и по нажатию на button должна по идее забиваться сюда pointStart:Date.UTC(YY,MM,DD) вот такая дата var YY = 2015 ;var MM = 1 ;var DD = 10 ; но ничего не происходит ( .

 var interval = 3600 * 1000 ; 
    var YY = 2014 ; 
    var MM = 1 ;  // 0-11 
    var DD = 5 ;  // 1-31 
    
    var chart11 = new Highcharts.StockChart({ 
        chart: { 
        backgroundColor: '#ffffff',     
    shadow: { 
            color: 'rgba(0, 0, 0, 0.08)', 
            offsetX: 5, 
            offsetY: 5, 
            opacity: '0.5', 
            width: 10 
        },         
    renderTo: "chart1",           
    type: "spline" 
  }, 
    rangeSelector: {buttons: [{type: 'day',count: 1,text: 'Д'}, {type: 'week',count: 1,text: 'Н'}, {type: 'month',count: 1,text: 'М'}, {type: 'year',count: 1,text: 'Г'}],buttonTheme: { 
                visibility: 'hidden' 
            },}, 
    rangeSelectorTo :{enabled: false,}    , 
 
    time: { 
         
        useUTC: true},   
    title: { 
    style:{"fontSize": "27px"} , 
    text: "AG-4" 
           },     
    subtitle: {text: ''}, 
    xAxis: {   
    //allowDecimals: false,     
    //tickInterval: 1 * 3600 * 1000,   
    tickInterval: 3600 * 1000*24*30,     
    type: 'datetime',    
    max: Date.UTC(2020, 0, 1),     
    dateTimeLabelFormats: {  
    hour: '%H:%M', 
    day: '%e. %b', 
    week: '%e. %b', 
    month: '%b \'%y', 
    year: '%Y',     
    //format: '{x:%H:%M}',     
    //day: '%b %e', 
    //week: '%b %e'  
       },  
          }, 
    yAxis: { 
     "fontSize": '21px', 
                offset: 45, 
                color: '#c9c7c7', 
                //min: 0, 
                //max: 100, 
                //tickInterval: 20, 
                labels: { 
                formatter: function () {return (this.value > 0 ? '' : '') + this.value + '%';}, 
                style: {fontSize: '14px',fontFamily: 'Verdana, sans-serif',fontWeight: 'bold',}         
                       }, 
                title: {text: ''} 
            }, 
         
      exporting: {enabled: true,buttons: {contextButton: {menuItems: ['downloadCSV', 'downloadXLS']}}}, 
      credits: {enabled: false}, 
      tooltip: { 
        shared: true, 
        useHTML: true, 
        headerFormat: '<small>{point.key}</small><table>', 
        pointFormat: '<tr><td style="color: {series.color}">{series.name}: </td>' + 
            '<td style="text-align: right"><b>{point.y} %</b></td></tr>', 
        footerFormat: '</table>', 
        valueDecimals: 2 
            }, 
  legend: {enabled: true}, 
  plotOptions: { 
      series:{ 
          useUTC: true, 
          pointStart:Date.UTC(YY,MM,DD), 
          pointInterval: interval 
          //tickInterval: 24 * 3600 * 1000 , 
          //pointEnd: Date.UTC (2018, 1, 10), 
      }, 
     
       
    area: { 
      connectNulls: false, 
      stacking: "normal", 
      lineColor: "#666666", 
      lineWidth: 1, 
      marker: { 
        lineWidth: 1, 
        lineColor: "#666666" 
      } 
    } 
  }, 
  series: [ 
    {color: 'rgba(172,199,255,255)', name: "-10",dataGrouping: {enabled: true}, 
      data: [34, 21, 20, 20, 19,34, 21, 20, 20, 19,43,87]  }, 
    {color: 'rgba(188,255,218,255)', name: "10-12,5",dataGrouping: {enabled: true}, 
      data: [80, 30, 10, 45, 77,80, 30, 10, 45, 77,23,77] }, 
    {color: 'rgba(200,240,255,255)', name: "12,5-14",dataGrouping: {enabled: true}, 
      data: [12, 34, 89, 55, 23,12, 34, 89, 55, 23,54,98] }, 
    {color: 'rgba(255,191,191,255)', name: "14-18",dataGrouping: {enabled: true}, 
      data: [88, 12, 56, 94, 22,88, 12, 56, 94, 22,34,34] }, 
    {color: 'rgba(227,208,241,255)', name: "+18",dataGrouping: {enabled: true}, 
     data: [10, 30, 28, 40, 299,10, 30, 28, 40, 299,44,54] }, 
  ], 
         
    },); 
     
    $('#button').click(function() { 
      
    var YY = 2015 ; 
    var MM = 1 ;  // 0-11 
    var DD = 10 ;  // 1-31 
    alert ('132'); 
 
    chart11.series[0].setData([50, 50, 20, 20, 50,50, 20, 20, 20, 50,50,50],true); 
    chart11.series[0].apply(this.pointStart[Date.UTC(2015,1,1)]);  
     
    
     
  
         
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js"></script> 
<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/maps/modules/map.js"></script> 
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script> 
<script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script> 
 <div id="chart1" style="height: 500px; width: 1400px;margin-top: 100px"> 
 <button id="button" style="position:absolute;left: 1400px;top:180px;z-index: 99999">дата</button>

READ ALSO
Почему не работает onMouseLeave в react?

Почему не работает onMouseLeave в react?

Не работает onMouseLeave когда кнопка disabled, а когда enabled то работает

135
Слайдер fotorama не отображает alt

Слайдер fotorama не отображает alt

При использовании fotorama, не отображаются alt в картинкахПрошу помощи

151
Почему появляется ошибка undefined?

Почему появляется ошибка undefined?

Почему выводит undefined?

165
Как сделать несколько параметров для OnClick?

Как сделать несколько параметров для OnClick?

Всем привет, подскажите пожалуйста как добавить несколько атрибутов в OnClickЕсть код:

102