highcharts x轴按照时间 datetime排序

最新推荐文章于 2023-08-30 08:50:25 发布

曹天骄

最新推荐文章于 2023-08-30 08:50:25 发布

阅读量653

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/solocao/article/details/112406088

版权

js 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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}]}]