javascript - 无法更改 Highcharts 上的日期格式

Question

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

查看 Highcharts dateTimeLabelFormats API ，看起来我需要将 %b-%e 添加到标签中，但这似乎不起作用。

这是我当前获得的结果的屏幕截图:/image/6ziJG.jpg

这是我的代码:

$(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 .

总的来说，我建议阅读 axes (!) 在 Highcharts 中。您对库了解得越多，您获得的结果就越好。