Highcharts:有没有办法从Highcharts测距仪按钮中提取不同的API?

zi8p0yeb  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(123)

我正在尝试用Coingecko API和Highcharts创建一个蜡烛图。问题是API会根据你要拉的范围发送不同的时间线。所以如果我拉1天,它会给予我几个小时,但如果我拉最大值,它会把它分成4天的增量。只有一个缩放功能拉最大数据,6个月以下的图表看起来很糟糕。2我试着在范围选择器按钮上添加事件处理程序,如下所示:

rangeSelector: {
  inputBoxWidth: '55px',
  selected: 1,
  buttons: [{
    type: 'day',
    count: 1,
    text: '1d',
    event: {
      function(e) {
        setTime(1);
        setVolTime(1);
      }
    }
  }, {
    type: 'day',
    count: 7,
    text: '7d',
    event: {
      function(e) {
        setTime(7);
        setVolTime(7);
      }
    }
  },

但是如果没有数据,它就不允许你点击按钮。我也试着在X轴上设置极值,如下所示:

xAxis: {
  events: {
    setExtremes: function(e) {
      if(typeof(e.rangeSelectorButton)!== 'undefined') {
        var c = e.rangeSelectorButton.count;
        var t = e.rangeSelectorButton.type;
        var btn_index = null;
        if(c == 1 && t == "day"){
          btn_index = 0;
        } else if(c == 7 && t == "day"){
          btn_index = 1;
        } else if(c == 1 && t == "month"){
          btn_index = 2;
        } else if(c == 6 && t == 'month'){
          btn_index = 3;
        } else if(c == 1 && t == "year"){
          btn_index = 4;
        } else if(t == "all"){
          btn_index = 5;
        }
        if (btn_index === 0) {
          setTime(1)
          setVolTime(1)
        } else if (btn_index === 1) {
          setTime(30)
          setVolTime(14)
        } else if (btn_index === 2) {
          setTime(30)
          setVolTime(30)
        } else if (btn_index === 3) {
          setTime(180)
          setVolTime('max')
        } else if (btn_index === 4) {
          setTime(365)
          setVolTime('max')
        } else if (btn_index === 5) {
          setTime('max')
          setVolTime('max')
        }
      }
    }
  }
},

然而,如果没有365天的数据,测距仪的按钮也不能被点击。例如,测距仪默认页面加载为7天,只有1天和7天按钮是“可点击的”。即使点击1天按钮也不能将状态从7天更改为1天。所以,在浏览了Highcharts论坛并尝试了我在这里发布的一些可能的解决方案后,我试图联系支持,并被重定向到这里堆栈溢出。一如既往,任何帮助都非常感谢。

mlnl4t2r

mlnl4t2r1#

是的,可以在rangeSelector事件中放置Highcharts的其他API,例如在获取数据时。

rangeSelector: {
  buttons: [{
    type: 'month',
    count: 1,
    text: '1m',
    events: {
      click: function() {
        // The Endpoint URL
        let url = 'https://jsonplaceholder.typicode.com/posts/1';
        fetch(url)
          .then(function(response) {
            // Render the Response Status
            document.getElementById('result').innerHTML = response.status;
            // Parse the body as JSON
            return response.json();
          })
          .then(function(json) {
            // Render the parsed body
            document.getElementById('result_json').innerHTML = JSON.stringify(json);
          })
      }
    }
  }, {
    type: 'month',
    count: 3,
    text: '3m'
  }, {
    type: 'month',
    count: 6,
    text: '6m'
  }, {
    type: 'ytd',
    text: 'YTD'
  }, {
    type: 'year',
    count: 1,
    text: '1y'
  }, {
    type: 'all',
    text: 'All'
  }]
},

演示:https://jsfiddle.net/BlackLabel/5agsvnL1/

相关问题