HighCharts.scatter 以时间为坐标轴展示Data

最近有个需求,需要有个chart展示某些microservice的不同时间的状态,UI设计出来的图我根据HighChart里面的Chart看,和scatter最符合,就决定使用scatter,但是他默认的X轴并不是时间,需要改成时间,花了点时间尝试,记录下.

Scatter 官网链接

首先把X轴变成以时间为单位的,就要用到这个type属性,设置成’datetime’,tickInterval是指的时间间隔,我这里写的是一天,label里面跟的是X轴显示的format,时间格式化,被我comment掉的是X轴 Label的对齐策略和旋转

 xAxis: {
    type: 'datetime',
    tickInterval: 24 * 36e5,
    labels: {
      format: '{value: %Y-%m-%e}',
      // align: 'right',
      // rotation: -30
    }
}

然后是hover某个Node时候的detail的展示format,这里有一点需要注意,这里的数据源并不是point了,之前我的有篇blog用的networkgraph,里面的节点变量就是point,我一开始也下意识用point,发现确实undefined,然后只有去前端debug,发现是options,还有一点,如果写成comment中的 lambda 形式的话,this将会是undefined,无法取到值.(鬼知道我经历了什么才总结出来的)

pointFormatter: function () {
      const time = new Date(this.options.x).toISOString();
      return time.substring(0, time.indexOf('T'));
}
//pointFormatter: () => {
//     const time = new Date(this.options.x).toISOString();
//     return time.substring(0, time.indexOf('T'));
//}

之后是数据格式,这里我给了三组数据,因为是测试数据,就没什么具体意义,只是为了测试把X轴变为时间为单位.这里要注意,如果是用new Date()这种,他会带有时区,导致在图中显示出来的点不会刚好在时间节点上,会根据时区偏移一点,所以我这里使用的是UTC时间,

 series: [
    {
      name: 'Type A',
      color: 'rgba(223, 83, 83, .5)',
      data: [
        [Date.UTC(2021, 1, 17), 1],
        [Date.UTC(2021, 1, 18), 1],
        [Date.UTC(2021, 1, 20), 1],
        [Date.UTC(2021, 1, 25), 1],
        [Date.UTC(2021, 1, 26), 1],

      ]
    },
    {
      name: 'Type B',
      color: 'rgba(119, 152, 191, .5)',
      data: [
        [Date.UTC(2021, 1, 17), 2],
        [Date.UTC(2021, 1, 20), 2],
        [Date.UTC(2021, 1, 21), 2],
        [Date.UTC(2021, 1, 24), 2],
        [Date.UTC(2021, 1, 25), 2],
        [Date.UTC(2021, 1, 26), 2]
      ]
    },
    {
      name: 'Type C',
      color: 'rgba(243, 247, 3, .5)',
      data: [
        [Date.UTC(2021, 1, 16), 3],
        [Date.UTC(2021, 1, 18), 3],
        [Date.UTC(2021, 1, 23), 3],
        [Date.UTC(2021, 1, 24), 3],
        [Date.UTC(2021, 1, 26), 3],

      ]
    },
  ]

所以我再给出最终的 config string

export const HISTORICAL_SRC = {
  chart: {
    type: 'scatter',
    zoomType: 'xy',
    width:1500
  },
  exporting: {
    enabled: false
  },

  title: null,

  credits: {
    enabled: false
  },
  xAxis: {
    startOnTick: true,
    endOnTick: true,
    showLastLabel: true,
    type: 'datetime',
    tickInterval: 24 * 36e5,
    labels: {
      overflow:'allow',
      format: '{value: %Y-%m-%e}',
      // align: 'right',
      // rotation: -30
    }
  },
  legend: {
    layout: 'vertical',
    align: 'left',
    verticalAlign: 'top',
    x: -15,
    y: 0,
    floating: true,
    backgroundColor: '#FFFFFF',
    // borderWidth: 1
  },
  yAxis: {
    title: {
      enabled: false
    },
    labels: {
      enabled: false
    }
  },
  plotOptions: {
    scatter: {
      marker: {
        radius: 10,
        states: {
          hover: {
            enabled: true,
            lineColor: 'rgb(100,100,100)'
          }
        }
      },
      states: {
        hover: {
          marker: {
            enabled: false
          }
        }
      },
      tooltip: {
        headerFormat: '<b>{series.name}</b><br>',
        // pointFormat: 'new Date({point.x}), {point.y} kg'
        pointFormatter: function () {
          const time = new Date(this.options.x).toISOString();
          return time.substring(0, time.indexOf('T'));
        }
      }
    }
  },
  series: [
    {
      name: 'Type A',
      color: 'rgba(223, 83, 83, .5)',
      data: [
        [Date.UTC(2021, 1, 17), 1],
        [Date.UTC(2021, 1, 18), 1],
        [Date.UTC(2021, 1, 20), 1],
        [Date.UTC(2021, 1, 25), 1],
        [Date.UTC(2021, 1, 26), 1],

      ]
    },
    {
      name: 'Type B',
      color: 'rgba(119, 152, 191, .5)',
      data: [
        [Date.UTC(2021, 1, 17), 2],
        [Date.UTC(2021, 1, 20), 2],
        [Date.UTC(2021, 1, 21), 2],
        [Date.UTC(2021, 1, 24), 2],
        [Date.UTC(2021, 1, 25), 2],
        [Date.UTC(2021, 1, 26), 2]
      ]
    },
    {
      name: 'Type C',
      color: 'rgba(243, 247, 3, .5)',
      data: [
        [Date.UTC(2021, 1, 16), 3],
        [Date.UTC(2021, 1, 18), 3],
        [Date.UTC(2021, 1, 23), 3],
        [Date.UTC(2021, 1, 24), 3],
        [Date.UTC(2021, 1, 26), 3],

      ]
    },
  ]
}

效果图