如何在给定数据集的高图中的x轴标签下添加y轴的值

Question

我正在尝试将我的yaxis值附加到xaxis标签下。我准备了一张图片来说明我在下面要完成的工作。

基本上我想抓住相应年份的第一个值并将其设置为x轴标签下的标签。

这是我附带数据集的小提琴。 http://jsfiddle.net/5df2mjmm/

目前，这里是我如何仅为x轴设置年份

xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: {
      day: '%d %b %Y' //ex- 01 Jan 2016
    }
  }

我也想弄清楚如何让每年都在x轴上展示，而不仅仅是2008,2010,2012,2014,2016。

我已经在这里工作了好几个小时而没有运气。如果有任何高级专家可以帮助我解决这个问题，我将非常感激。

谢谢。

Answer 1

当标签没有足够的空间时，Highcharts不会呈现所有年份。您可以通过设置xAxis.tickInterval: 365 * 24 * 3600 * 1000强制Highcharts呈现这些标签。

关于标签问题，您需要使用xAxis.labels.formatter，演示：http://jsfiddle.net/5df2mjmm/9/

使用tickInterval设置的演示：http://jsfiddle.net/5df2mjmm/4/

段：

xAxis: {
  type: 'datetime',
  tickInterval: 265 * 24 * 3600 * 1000,
  labels: {
    formatter: function() {

      var currentX = new Date(this.value),
        xIndex;

      // Because labels in Highcharts are rendered at 1st of Month,
      // But data is last day of the month, we need to jump to the last day of the January:
      currentX.setUTCDate(31);

      // xData stores base x-values for series, get current date index:
      xIndex = this.axis.series[0].xData.indexOf(+currentX);

      return Highcharts.dateFormat('%d %b %Y', this.value) + '<br>' + this.axis.series[0].yData[xIndex]; // the same as with xData, we can use yData
    }
  }
},