如何在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. 我只想显示与数据系列中第一个和最后一个点对应的日期。

如果有人能告诉我如何解决这两个问题，我将非常感激。

谢谢。

- Curious2learn

Answer 1

关于(1)问题，在HighCharts中的日期时间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]
    ]
}]

基本上我的做法是去掉x轴标签，只在点的值中显示所需的日期 (第一个和最后一个)。请注意，您可能需要格式化要显示的日期，因为现在显示的是毫秒级时间戳。

您可以在jsFiddle: xAxis labels deleted 上实时查看。

- Nobita

---

谢谢你，Nobita。你的解决方案也是可行的，这很好。但我想让日期显示在坐标轴上。如果这是唯一的回复，我会将其接受为答案。感谢你的回复，我很感激。 - Curious2learn

Answer 2

你可以通过使用 .isLast 和 .isFirst 来轻松实现，就像这样：

     xAxis: {
                type: 'datetime',
                labels: {
                    formatter: function() {
                        if(this.isLast || this.isFirst)
                            return [whatever label calculation you need];
                        else return null;
                    },
                },
                title: {
                    text: 'Date'
                }
            }

- Eran Goldin

Answer 3

这是一个老问题，但现在有一个更加简洁的方式来使用tickPositions来实现。

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },
  xAxis: {
     type: 'datetime',
     labels: {
         // When using tickPositions, you'll also need to specify a label format.
         format: '{value:%e. %b}',
     },         
     tickPositions: [Date.UTC(2007,05,29), Date.UTC(2007,09,04)]
  },
  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.
     ]         
  }]
});

JSFiddle演示

生成的图表

- JohnnyHK

Answer 4

这是有点可能的。这个代码会生成：

但是代码并不美观。

- Mark

---

谢谢！我喜欢你为我提供的简化示例代码。但你说得对，对于实际情况，我需要展示大约10-12个不同的日期，那么就会有很多else if语句。此外，还有太多的刻度线，我想避免这种情况。无论如何，这仍然很有帮助，所以我将接受它作为答案。 - Curious2learn

Answer 5

你尝试过在xAxis下放置一个逗号分隔的值列表吗：{categories：[{'5/29/2007'，'9/4/2007'，'9/23/2008'}]}

对于图表：{series：[{null}，{300}，{400}]}

我相信你也可以使用xAxis标签或系列标签的委托，以便您可以针对阈值测试值并将其删除。

- Wade