[highchart] x軸自動填滿取消

reactjs highcharts javascript

Chris 2020-12-14 12:51:51 ‧ 1460 瀏覽

分享至

假設我目前有6組資料

series:[Date.utc(20,10,14),....,Date.utc(20,11,14)]

預計想顯示的是這樣

可是當我把視窗拉大之後會變成這樣

我發現它會自動補足x軸的空白處，請問有甚麼方法可以停掉這個功能嗎，感謝各位大大

下面附上highchart的部分 code

line:{
        xAxis: {
          ordinal: false,
          type:'datetime',
          startOfWeek: 1,
          dateTimeLabelFormats:
          this.props.timeUnit ==='glbtime_YMDH'
            ? {hour: '%Y-%m-%d-%h'}
            : this.props.timeUnit==='glbtime_YMD' 
              ? { day: '%Y-%m-%d'} 
              : this.props.timeUnit==='glbtime_WEEKNUM' 
                ? {week: '%Y-%m-%d'}
                : {month: '%Y-%m'},
          labels: {
            rotation: -30,
            style: { fontSize: '9px' }
          },
        },
}

看更多先前的討論...收起先前的討論...

powerc iT邦新手 1 級 ‧ 2020-12-14 14:23:36 檢舉

ordinal: false改成true?

listennn08 iT邦高手 5 級 ‧ 2020-12-14 14:44:24 檢舉

labels: {
step: "what step you want"
}
https://api.highcharts.com/highcharts/xAxis.labels.step

Chris iT邦新手 5 級 ‧ 2020-12-14 14:45:19 檢舉

我剛剛試了沒用 QQ

Chris iT邦新手 5 級 ‧ 2020-12-14 14:46:03 檢舉

感謝 listennn08 大大我馬上試試看

listennn08 iT邦高手 5 級 ‧ 2020-12-14 14:51:48 檢舉

還要設定 categories 才會固定 labels

Chris iT邦新手 5 級 ‧ 2020-12-14 15:46:26 檢舉

剛剛稍微試了一下還是不太能達成我的需求，不過還是感謝大大的回答~

Chris iT邦新手 5 級 ‧ 2020-12-14 15:50:05 檢舉

主要原因是我的日期不太能以等差區別，這樣反而會漏掉一些。categories 的部分我不太清楚是要設定 type= categories 還是其他的部分，不過礙於我其他格式都是配合 datetime 做的，這樣反而會改動太大就不做了

listennn08 iT邦高手 5 級 ‧ 2020-12-14 16:42:04 檢舉

這樣可以只設定 categories 不用設定 step
xAxis: {
categories: [Date.utc(20,10,14),....,Date.utc(20,11,14)]
}
把資料的時間取出來新增成 categories 就好
https://codepen.io/gitoxxvn/pen/oNzBmze