Question

我想在$.ajax({ // Specify that the response will be JSON dataType: 'json', // ... your code success: function(data){ // Now you can access each element of your response with dot notation $("#grand_discount_amount").html(data.discount); $("#some_other_field").html(data.price);中显示自定义Label并添加此代码进行一些测试：

X-Axis

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

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>

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

1 个答案: