javascript - 在 Highchart 中为 X 轴添加格式化程序

Question

我想在 X-Axis 中显示自定义 Label 并添加此代码进行一些测试:

xAxis: {
    labels: {
       style: {
       color: 'red',
       fontSize: 16
    },
    formatter: function() {
        return '<span style="font-size: 18px;font-weight: bold">' + this.value + '</span>';
    }
 }
}

但是 Dates 没有正确显示:

Demo

我的错误在哪里？

谢谢

Answer 1

this.value 可能返回自 1970 年 1 月 1 日 UTC 以来的毫秒数。

要获取格式化日期，请使用带有所需说明符的 Highcharts.dateFormat。例如，日期和月份:

var date = Highcharts.dateFormat("%e %b", this.value)

有关说明符的完整列表，请参见此处:https://api.highcharts.com/highcharts/xAxis.dateTimeLabelFormats

这里是你的代码有那个变化:

var chart = Highcharts.stockChart('container', {

  rangeSelector: {
    selected: 1,
    inputBoxStyle: {
      right: '80px'
    }
  },
  xAxis: {
    labels: {
      style: {
        color: 'red',
        fontSize: 16
      },
      formatter: function() {
      	var date = Highcharts.dateFormat("%e %b", this.value)
        return '<span style="font-size: 18px;font-weight: bold">' + date + '</span>';
      }
    }
  },
  series: [{
    name: 'USD to EUR',
    data: usdeur
  }],

  exporting: {
    chartOptions: {
      chart: {
        width: 1024,
        height: 768
      }
    }
  }
});

$('#button').click(function() {
  chart.exportChart();
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div id="container" style="height: 400px; min-width: 600px"></div>

<button id="button">Export chart</button>

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript" src="https://www.highcharts.com/samples/data/usdeur.js"></script>