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

})

这段代码告诉我：

enter image description here

这有两个问题。

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

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

谢谢。

Answer 1

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

在回答（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标签，只显示我想要的值（第一个和最后一个）的点本身的日期。请注意，您可能希望格式化该日期的显示方式，因为此时显示的是以ms为单位的时间戳。

您可以在jsFiddle: xAxis labels deleted

中看到这一点

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

Answer 3

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

enter image description here

虽然这不是很好的代码。

Answer 4

旧问题，但现在有一种更清晰的方法可以使用tickPositions。

<div class="custom_image" id="uique_number"></div>

JSFiddle demo

结果图表

Answer 5

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

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

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

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

5 个答案: