如何使用可选年份下拉列表创建时间线聊天

Question

我想创建一个包含年份的时间线图表，如果我们从下拉列表中选择年份，则必须显示该特定年份图表。请检查上方图像

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/

您要使用的方法是setExtremes和getExtremes：

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