javascript - 如何在开始和结束时自定义 xAxis 标签？

Question

如何在开始和结束时自定义 xAxis 标签？

我想显示开始日期和结束日期，而不仅仅是时间。

Highcharts.chart('container', {
  chart: {
    type: 'spline'
  },
  title: {
    text: 'PH Values'
  },
  subtitle: {
    text: 'some subtitle'
  },
  xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: { // don't display the dummy year
      month: '%e. %b',
      year: '%b'
    },
    title: {
      text: 'Date'
    },
    plotBands: [{
      "from": 694004580000,
      "to": 694005180000,
      "color": "rgba(68, 170, 213, 0.1)",
      "label": {
        "text": "Snack",
        "style": {
          "color": "#606060"
        }
      }
    }]
  },
  yAxis: {
    title: {
      text: 'PH Level'
    },
    min: 0
  },
  tooltip: {
    headerFormat: '<b>{series.name}</b><br>',
    pointFormat: '{point.x:%e. %b}: {point.y:.2f} ph'
  },

  plotOptions: {
    spline: {
      marker: {
        enabled: true
      }
    }
  },

  colors: ['#6CF', '#39F', '#06C', '#036', '#000'],

  // Define the data points. All series have a dummy year
  // of 1970/71 in order to be compared on the same x axis. Note
  // that in JavaScript, months start at 0 for January, 1 for February etc.
  series: [{
    name: "PH Values",
    data: [
      [694004400000, 5.03],
      [694004410000, 5.08],
      [694004430000, 4.83],
      [694004460000, 4.93],
      [694004500000, 4.98],
      [694004550000, 4.83],
      [694004610000, 4.08],
      [694004680000, 3.93],
      [694004760000, 3.78],
      [694004850000, 3.88],
      [694004950000, 4.03],
      [694005060000, 4.08],
      [694005180000, 4.18],
      [694005310000, 4.43],
      [694005450000, 4.63],
      [694005600000, 4.83],
      [694005760000, 4.98],
      [694005930000, 4.78],
      [694006110000, 4.88],
      [694006300000, 5.11],
      [694006500000, 4.53],
      [694006720000, 4.22],
      [694006960000, 4.02],
      [694007210000, 3.95],
      [694007470000, 3.82],
      [694007740000, 3.71],
      [694008020000, 3.63],
      [694008310000, 3.53],
      [694008610000, 3.58],
      [694008920000, 3.82],
      [694009240000, 3.89],
      [694009570000, 4.01],
      [694009910000, 4.09],
      [694010260000, 4.09],
      [694010620000, 4.38],
      [694010990000, 4.48],
      [694011370000, 4.78],
      [694011760000, 4.88],
      [694012160000, 4.98],
      [694012570000, 4.93],
      [694012990000, 4.48],
      [694013420000, 3.93],
      [694013860000, 4.01],
      [694014310000, 4.08],
      [694014770000, 4.38],
      [694015240000, 4.33],
      [694015720000, 3.93],
      [694016210000, 3.81],
      [694016710000, 3.73]
    ]
  }]
});

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

我注意到有一个 formatter option for labels ，但我不知道该怎么做。我如何知道它是第一个值还是最后一个值？谢谢。

labels: {
   formatter: ()=>{
       if(this.isFirst || this.isLast){
           return '%e. %b'
       }
       return this.value;
   }
}

但显然不起作用。

Answer 1

你很接近。您只需要使用 dateFormat Highcharts 解释时间的函数。您可以在 xAxis 上这样设置:

labels: {
  formatter: function() {
    if(this.isFirst || this.isLast){
        return Highcharts.dateFormat('%e. %b', this.value)
    }
      return Highcharts.dateFormat('%H:%M', this.value)
  }
},

此外，如果您想在数据开始/结束之前/之后显示刻度，您需要在 xAxis 上设置这些选项:

showFirstlabel: true,
startOnTick: true,
showLastLabel: true,
endOnTick: true,

工作示例:

Highcharts.chart('container', {
  chart: {
    type: 'spline'
  },
  title: {
    text: 'PH Values'
  },
  subtitle: {
    text: 'some subtitle'
  },
  xAxis: {
    showFirstlabel: true,
    startOnTick: true,
    showLastLabel: true,
    endOnTick: true,
    labels: {
      formatter: function() {
      if(this.isFirst || this.isLast){
      	return Highcharts.dateFormat('%e. %b', this.value)
      }
        return Highcharts.dateFormat('%H:%M', this.value)
      }
    },
    type: 'datetime',
    dateTimeLabelFormats: { // don't display the dummy year
      month: '%e. %b',
      year: '%b'
    },
    title: {
      text: 'Date'
    },
    plotBands: [{
      "from": 694004580000,
      "to": 694005180000,
      "color": "rgba(68, 170, 213, 0.1)",
      "label": {
        "text": "Snack",
        "style": {
          "color": "#606060"
        }
      }
    }]
  },
  yAxis: {
    title: {
      text: 'PH Level'
    },
    min: 0
  },
  tooltip: {
    headerFormat: '<b>{series.name}</b><br>',
    pointFormat: '{point.x:%e. %b}: {point.y:.2f} ph'
  },

  plotOptions: {
    spline: {
      marker: {
        enabled: true
      }
    }
  },

  colors: ['#6CF', '#39F', '#06C', '#036', '#000'],

  // Define the data points. All series have a dummy year
  // of 1970/71 in order to be compared on the same x axis. Note
  // that in JavaScript, months start at 0 for January, 1 for February etc.
  series: [{
    name: "PH Values",
    data: [
      [694004400000, 5.03],
      [694004410000, 5.08],
      [694004430000, 4.83],
      [694004460000, 4.93],
      [694004500000, 4.98],
      [694004550000, 4.83],
      [694004610000, 4.08],
      [694004680000, 3.93],
      [694004760000, 3.78],
      [694004850000, 3.88],
      [694004950000, 4.03],
      [694005060000, 4.08],
      [694005180000, 4.18],
      [694005310000, 4.43],
      [694005450000, 4.63],
      [694005600000, 4.83],
      [694005760000, 4.98],
      [694005930000, 4.78],
      [694006110000, 4.88],
      [694006300000, 5.11],
      [694006500000, 4.53],
      [694006720000, 4.22],
      [694006960000, 4.02],
      [694007210000, 3.95],
      [694007470000, 3.82],
      [694007740000, 3.71],
      [694008020000, 3.63],
      [694008310000, 3.53],
      [694008610000, 3.58],
      [694008920000, 3.82],
      [694009240000, 3.89],
      [694009570000, 4.01],
      [694009910000, 4.09],
      [694010260000, 4.09],
      [694010620000, 4.38],
      [694010990000, 4.48],
      [694011370000, 4.78],
      [694011760000, 4.88],
      [694012160000, 4.98],
      [694012570000, 4.93],
      [694012990000, 4.48],
      [694013420000, 3.93],
      [694013860000, 4.01],
      [694014310000, 4.08],
      [694014770000, 4.38],
      [694015240000, 4.33],
      [694015720000, 3.93],
      [694016210000, 3.81],
      [694016710000, 3.73]
    ]
  }]
});

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>