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

我在这个主题上搜索了很多。我在stackoverflow上找到了一个答案，但它非常简洁并且对我没有帮助（因为我对javascript和highcharts都很新颖）。如果有人能够通过修改我的代码来解释如何做到这一点，我将不胜感激。如何仅在Highcharts中的日期时间轴上显示特定的x轴值

我有以下代码：

$(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. 
     ]   
     }] 
    }); 

})

此代码给我：

enter image description here

有两个问题。

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

如果有人能告诉我如何做这两件事情，我真的很感激。

谢谢。

来源

2011-12-29 Curious2learn

这是有点可能。这code here产生：

enter image description here

这是不漂亮的代码虽然。

来源

2011-12-31 18:32:32 Mark

谢谢！我喜欢你提供的简化例子的代码。但是你是对的，对于我想要展示的约10-12个不同日期的真实案例，将会有许多其他的陈述。此外，还有太多的蜱虫，我想避免。无论如何，这仍然有帮助，所以我会接受它作为答案。 – Curious2learn 2012-01-01 18:03:36

关于（1）问题，我相信你不能这样做，在HighCharts日期时间x轴。设置该类型的轴时，框架将根据您拥有的数据计算相应轴中显示的刻度。

在回答（2）问题，我相信到目前为止，你不能跳过日期时间轴的时间。但是，即使我没有尝试过，也可能需要使用类别来查看一些解决方法，以便您可以使用格式化程序并替换不需要的刻度。

尽管所有上述，我做了一个解决方法，你可能想要使用，它只需要一点点的格式化或多或少你问。这里是：

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

来源

2011-12-31 09:26:00 Nobita

谢谢，大雄。你也是一个可能的解决方案，这很好。但我希望日期显示在轴上。如果这是唯一的答案，我会接受它作为答案。感谢您的回复，我很感激。 – Curious2learn 2012-01-01 18:04:55

您是否尝试在xAxis下放置逗号分隔的值列表：{{'5/29/2007'，'9/4/2007'，'9/23/2008'}]}

和图表：{系列：[{空}，{300}，{400}]}

我相信你也可以使用一个委托x轴标签或一系列标签，这样可以测试将数值与阈值进行比较并将其删除。

来源

2012-01-04 19:27:28 Wade

您可以.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' 
       } 
      }

来源

2016-04-22 14:30:36

老问题，但现在有一个更清洁的方式与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 demo

结果图表

来源

2016-05-07 14:38:30 JohnnyHK

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

回答

相关问题