如何創建可選一年下拉時間網上聊天

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/

方法WH ICH您要使用的setExtremes和getExtremes：

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