highcharts x轴 按照时间 datetime排序

1、我的配置文件代码:

var chart = Highcharts.chart('warningCharts', {
   chart: {
     type: 'line',
   },
   style: {
     fontSize: '12px',
     color: '#006cee',
     padding: '10rpx',
   },
   title: {
     text: null,
   },
   subtitle: {
     text: null,
   },
   series: data,
   xAxis: {
     type: 'datetime',
     dateTimeLabelFormats: {
       day: '%m-%d',
     },
   },
   yAxis: {
     allowDecimals: false,
     title: {
       text: null,
     },
   },
   credits: { enabled: false },
   legend: {
     enabled: false,
     layout: 'vertical', // 垂直布局
     align: 'right', // 靠右
     verticalAlign: 'top', // 顶部
   },
   plotOptions: {
     series: {
       label: {
         connectorAllowed: false,
       },
       allowPointSelect: true,
       point: {
         events: {
           select: function (e) {
             self.getOrders(e.target.name)
           },
         },
       },
     },
   },
   tooltip: {
     borderRadius: 10, // 边框圆角
     shadow: true, // 是否显示阴影
     animation: true, // 是否启用动画效果
     style: {
       // 文字内容相关样式
       color: '#498bf8',
       fontSize: '12px',
       fontFamily: 'Courir new',
     },
     pointFormatter: function () {
       return '<b>' + this.y + '次' + '</b><br/>'
     },
     formatter: function () {
       return Highcharts.dateFormat('%Y-%m-%d', this.x) + '<br/>工单数:' + this.y
     },
   },
   responsive: {
     rules: [
       {
         condition: {
           maxWidth: 500,
         },
         chartOptions: {
           legend: {
             layout: 'horizontal',
             align: 'center',
             verticalAlign: 'bottom',
           },
         },
       },
     ],
   },
 })
 chart.reflow()

其中数据为:

[{"name":"事件1","data":[{"x":1592582400000,"y":4},{"x":1592668800000,"y":4},{"x":1592928000000,"y":4},{"x":1593187200000,"y":5}]},{"name":"事件2","data":[{"x":1592582400000,"y":6},{"x":1592755200000,"y":4},{"x":1592841600000,"y":12},{"x":1593187200000,"y":4}]}]

效果截图:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值