Как создать временную линию чат с выбираемого годом выпадающего списком

Question

Я хочу, чтобы создать диаграмму линии времени с годом, если выбрать год из выпадающего списка, то должно показать, что конкретный год проверку chart.once над изображением

Answer 1

Вот пример со стрелками, который позволяет выбрать временной интервал:

const options = { 
    chart: { 
    type: 'column', 
    panning: true, 
    events: { 
     load: function() { 
     const chart = this 
     const moveLeft =() => { 
      let {min, max, dataMin} = chart.xAxis[0].getExtremes() 
      if (min - 3 >= dataMin) { 
      min -= 3 
      max -= 3 
      } 
      chart.xAxis[0].setExtremes(min, max) 
     } 
     const moveRight =() => { 
      let {min, max, dataMax} = chart.xAxis[0].getExtremes() 
      if (max + 3 <= dataMax) { 
      min += 3 
      max += 3 
      } 
      chart.xAxis[0].setExtremes(min, max) 
     } 
     const leftArrowUrl = 'https://egiveusa.com/appdev/images/icons/icomoon/svg/arrow-left3.svg' 
     const rightArrowUrl = 'http://egiveusa.com/appdev/images/icons/icomoon/svg/arrow-right3.svg' 
     const leftArrow = chart.renderer.image(leftArrowUrl, 0, 150, 30, 30).attr({ zIndex: 10 }) 
     const rightArrow = chart.renderer.image(rightArrowUrl, 600, 150, 30, 30).attr({ zIndex: 10 }) 
     leftArrow.on('click', moveLeft).add() 
     rightArrow.on('click', moveRight).add() 
     } 
    } 
    }, 
    xAxis: { 
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
     'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' 
    ], 
    max: 2 
    }, 
    yAxis: { 
    title: { 
     text: '·' 
    } 
    }, 
    series: [...Array(5)].map(() => { 
    return { 
     data: [...Array(12)].map(() => Math.round(Math.random() * 300)) 
    }; 
    }) 
} 

const chart = Highcharts.chart('container', options) 

https://jsfiddle.net/j59o5e6k/

методы ВГ Ich вы хотите использовать в setExtremes и getExtremes:

http://api.highcharts.com/highcharts/Axis.getExtremes http://api.highcharts.com/highcharts/Axis.setExtremes