x 和 y 轴的 Highcharts x-range 图表日期时间类型答案

【问题标题】：Highcharts x-range chart datetime type for x and y axisx 和 y 轴的 Highcharts x-range 图表日期时间类型
【发布时间】：2020-12-16 15:12:23
【问题描述】：

我创建了一个 x 范围图表来表示一些范围。我想将 x 轴和 y 轴都设为 DateTime 类型。目前，x 轴和 y 轴都是数字。我创建了一个小提琴来展示我当前的行为。

如何使 x 和轴 DateTime 类型？

https://jsfiddle.net/bonyfus/t4vz0Lkw/

 Highcharts.chart('container', {
  chart: {
    type: 'xrange',
    animation: false,
    inverted: true    
  },
  credits: false,
  exporting: false,
  title: {
    text: 'Highcharts X-range'
  },
  plotOptions: {
    series: {
      pointPadding: 0,
      pointWidth: 20,
      borderWidth: 0,
      borderRadius: 0,
      grouping: false,
    },
  },

  xAxis: {   
    gridLineWidth: 1,
    reversed: false,
    tickInterval: 1,
    startOnTick: true,
    endOnTick: true,   
    min: 0,
    max: 23,
    title: {
      text: 'Hours',
    }

  },
  yAxis: {
    min: 0,
    max: 7,
    tickInterval: 1,  
    tickWidth: 1,

    gridLineWidth: 1,
    endOnTick: false,
    startOnTick: false,
    reversed: false,
    title: {
      text: 'Days',
    }     
  },
 legend: {
    useHTML: true,
    y: 0,
    enabled: true,
    floating: false,
    align: 'right',
    layout: 'vertical',
    margin: 0,
    verticalAlign: 'top',
    symbolWidth: 30,
    symbolHeight: 22,
    symbolRadius: 0,
    squareSymbol: false,
    borderWidth: 0,
    itemDistance: 10,
    itemMarginBottom: 6,
    itemStyle: {
      fontSize: '12px',
      fontWeight: 'normal',
      textAlign: 'center',
      padding: '0px',      
      opacity: 1,
    },
    itemHoverStyle: {
      opacity: 1,      
      fontWeight: 'bold',
    },
    itemHiddenStyle: {
      opacity: 0.7      
    },
  },
    
  series: [{
      name: 'Drilling',
      data: [{
          x: 0.01,
          x2: 0.04,
          y: 1,
          color: 'blue',
        },
        {
          x: 20,
          x2: 23,
          y: 1,
          color: 'blue',
        },
      ],
      dataLabels: {
        enabled: true
      }
    },
    {
      name: 'Tripping',
      data: [{
        x: 10,
        x2: 15,
        y: 5,
      }, ],
      dataLabels: {
        enabled: true
      }
    },
    {
      name: 'Sliding',
      data: [{
        x: 15,
        x2: 20,
        y: 5,
        color: 'green',
      }, ],
      dataLabels: {
        enabled: true
      }
    },
    {
      name: 'Circulating',
      data: [{
          x: 20,
          x2: 23,
          y: 5,
          color: 'purple',
        },
        {
          x: 20,
          x2: 23,
          y: 6,
          color: 'purple',
        }
      ],
      dataLabels: {
        enabled: true
      }
    }
  ]

});

【问题讨论】：

标签： highcharts angular-highcharts

【解决方案1】：

首先，请注意，在图表中，x 轴通常是水平轴。
当您 invert 图表时，x 轴现在是垂直的。

为了将轴类型更改为datetime，您必须正确声明数据。通常，它以毫秒为单位声明，或者您可以设置日期并使用Date.UTC 方法将其转换为毫秒，就像我在下面的演示中所做的那样。在这种情况下，下面的 y 轴的 confix 是用于水平轴的。

 yAxis: {
    type: 'datetime',
    min: Date.UTC(2020, 11, 5, 0, 0, 0),
    tickInterval: 60 * 60 * 1000, // i hour interval, 
    endOnTick: false,
    startOnTick: false,
    reversed: false,
    title: {
      text: 'Days',
    }
  },

API：
https://api.highcharts.com/highcharts/xAxis.tickInterval

演示：
https://jsfiddle.net/BlackLabel/bxqnkvm6/

【讨论】：