无法更改Highcharts上的日期格式

Question

我正在尝试将x轴标签上的日期格式从“ 2014-10-05 00:00:00 ”更改为“ 10月5日 “

查看Highcharts dateTimeLabelFormats API，看起来我需要在标签上添加％b-％e ，但这似乎不起作用。

以下是我目前获得的结果的屏幕截图：http://imgur.com/roDOLXd

这是我的代码：

$(document).ready(function() {

 var yearmontharray = [];
 var valuesarray = [];

 $().SPServices({
  operation: "GetListItems",
  async: false,
  listName: "List",
  CAMLViewFields: "<ViewFields><FieldRef Name='Date' /><FieldRef Name='values' /></ViewFields>",
  completefunc: function (xData, Status) {
   $(xData.responseXML).SPFilterNode("z:row").each(function() {
    var yearmonth = ($(this).attr("ows_Date"));
    var values = Math.round($(this).attr("ows_values"));

    yearmontharray.push(yearmonth);
    valuesarray.push(values);
   });
   console.log(valuesarray);
   var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'line',
                marginRight: 130,
                marginBottom: 25
            },
            title: {
                text: 'Total values',
                x: -20
            },
            subtitle: {
                text: 'This chart shows value from SharePoint',
                x: -20
            },
            xAxis: {
                categories: yearmontharray,
                labels: {
                    overflow: 'justify',
                    type: 'datetime',
                    dateTimeLabelFormats: {
                        day: '%b-%e'
                    }
                }
            },
            yAxis: {
                title: {
                    text: 'values'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 100,
                borderWidth: 0
            },
            series: [{
                name: 'values',
                data: valuesarray
            }]
        });

  }
 });
 
 
  
});

Answer 1

问题在于使用类别：categories: yearmontharray, - 当您使用类别时，xAxis.type设置为category，而不是datetime。

所以你有几个解决方案：

• 使用formatter作为标签，预处理类别字符串以获得所需的输出
• 在后端更改格式，以适当的方式返回类别格式化程序
• 使用日期时间轴而不是使用类别。可以找到更多关于 here。

在属中，我建议在Highcharts中阅读axes（！）。你理解库越好，你将获得更好的结果。