javascript - 如何在 Highcharts 中的日期时间轴上仅显示特定的 x 轴值

Question

我已经搜索了很多关于这个主题的内容。我在 stackoverflow 上找到了一个答案，但它非常简洁并且对我没有帮助(因为我对 javascript 和 highcharts 都很陌生)。如果有人可以通过修改下面的代码来解释如何执行此操作，我将不胜感激。

我有以下代码:

$(document).ready(function() {
   var chart = new Highcharts.Chart({
      chart: {
         renderTo: 'divcontainer',
         height: 500
      },
      xAxis: {
         type: 'datetime',
      },
      credits: {
         enabled: false
      },
      series: [{
         data: [
            [Date.UTC(2007,05,29), 300], // This x-axis value should be labeled.
            [Date.UTC(2007,09,03), 300], // NO LABEL for this value
            [Date.UTC(2007,09,04), 200]  // This x-axis value should be labeled.
         ]         
      }]
   });

})

这段代码给我:

这有两个问题。

(1) 未显示起始日期 2007 年 6 月 29 日。我希望那个出现在图表中。 (2) 我只想显示与数据系列中的第一个和最后一个点对应的日期。

如果有人能告诉我如何做这两件事，我将不胜感激。

谢谢。

Answer 1

关于 (1) 问题，我相信您不能在 HighCharts 的 datetime xAxis 中这样做。设置该类型的轴​​时，框架会根据您拥有的数据计算相应轴中显示的刻度。

在回答(2) 问题时，我相信到目前为止您不能在日期时间轴上跳过时间。但是，即使我没有尝试过，您也可能想看看使用 categories 的一些解决方法，这样您就可以使用格式化程序并替换不需要的刻度。

尽管有上述所有情况，我还是做了一个您可能想要使用的解决方法，它只需要一点点格式设置就可以或多或少您所要求的。在这里:

var chart = new Highcharts.Chart({
chart: {
    renderTo: 'container'
},
xAxis: {
    type: 'datetime',
    labels: {
        enabled: false
    }

},

series: [{
    dataLabels: {
        enabled:true,
        formatter: function(){
            if(this.point === this.series.data[this.series.data.length - 1])
            {
                return this.x
            }
            if(this.point === this.series.data[0])
            {
                return this.x
            }
        } 
    },
    data: [
        [Date.UTC(2007,05,29), 300], 
        [Date.UTC(2007,09,23), 300], 
        [Date.UTC(2007,09,04), 400]
    ]
}]

});

基本上我所做的是摆脱 xAxis 标签，只在点本身中显示我想要的值(第一个和最后一个)的日期。请注意，您可能希望格式化该日期的显示方式，因为现在以毫秒为单位显示时间戳。

您可以在 jsFiddle: xAxis labels deleted 中实时查看此内容