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

效果截图:

Highcharts Gantt 图表中,配置 X 时间格式和显示文字主要依赖于 `xAxis` 的配置项,特别是 `labels` 和 `dateTimeLabelFormats` 属性。以下是一个典型的配置示例,展示了如何设置 X 时间格式和显示文字: ### 配置 X 时间格式和显示文字 ```javascript xAxis: { type: 'datetime', labels: { format: '{yyyy}-{MM}-{dd}', // 设置 X 标签的显示格式 rotation: -45, // 设置标签旋转角度 align: 'right' // 设置标签对齐方式 }, dateTimeLabelFormats: { day: '%Y-%m-%d', // 设置 X 显示为天数时的格式 week: '%Y-%m-%d', // 设置 X 显示为周数时的格式 month: '%Y-%m', // 设置 X 显示为月份时的格式 year: '%Y' // 设置 X 显示为年份时的格式 } } ``` ### 中文化 X 显示 如果希望将 X 时间显示从英文改为中文,可以通过 `Highcharts.setOptions.lang` 设置全局语言选项,包括月份和星期的显示格式。以下是一个示例配置: ```javascript Highcharts.setOptions({ lang: { months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], weekdays: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期天"] } }); ``` ### 自定义 X 的显示格式 如果需要更复杂的格式化,可以使用 `formatter` 函数来自定义 X 的显示格式。以下是一个示例: ```javascript xAxis: { labels: { formatter: function () { const date = new Date(this.value); const year = date.getFullYear(); const month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份从0开始,需要加1 const day = ('0' + date.getDate()).slice(-2); return `${year}-${month}-${day}`; // 自定义格式 } } } ``` ### 结合中文显示的完整示例 为了确保 X 时间显示为中文,可以在全局设置中配置 `lang` 属性,同时在 `xAxis` 中设置 `labels` 和 `dateTimeLabelFormats`: ```javascript Highcharts.setOptions({ lang: { months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], weekdays: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期天"] } }); const chartOptions = { xAxis: { type: 'datetime', labels: { format: '{yyyy}-{MM}-{dd}', // 设置 X 标签的显示格式 rotation: -45, // 设置标签旋转角度 align: 'right' // 设置标签对齐方式 }, dateTimeLabelFormats: { day: '%Y-%m-%d', // 设置 X 显示为天数时的格式 week: '%Y-%m-%d', // 设置 X 显示为周数时的格式 month: '%Y-%m', // 设置 X 显示为月份时的格式 year: '%Y' // 设置 X 显示为年份时的格式 } } }; Highcharts.ganttChart('container', chartOptions); ``` 通过上述配置,可以在 Highcharts Gantt 图表中灵活地设置 X 时间格式和显示文字,同时支持中文显示。如果需要进一步的自定义,可以结合 `formatter` 函数实现更复杂的逻辑。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值