0

我正在尝试将我的 x 轴标签上的日期格式从“ 2014-10-05 00:00:00 ”更改为“ Oct-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
            }]
        });

  }
 });
 
 
  
});

4

1 回答 1

2

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

所以你有几个解决方案：

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

一般来说，我建议阅读Highcharts 中的轴（！）。您对图书馆了解得越多，您将获得更好的结果。

于 2014-10-10T09:40:49.407 回答