2014-10-09 3 views
0

Я пытаюсь изменить формат даты на моем ярлыке оси х от «2014-10-05 00:00:00» к «октября-5»Невозможно изменить формат даты Highcharts

Рассмотрение 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 
 
      }] 
 
     }); 
 

 
    } 
 
}); 
 
    
 
    
 
    
 
});

ответ

2

Проблема с использованием категорий: categories: yearmontharray, - когда вы используете категории, то для xAxis.type установлено значение category, а не datetime.

Так у вас есть несколько решений:

  • использовать formatter для этикеток, там препроцессировать вашу строку категории, чтобы получить желаемую выходной
  • изменения вашего формата на стороне серверной, чтобы вернуть категории форматировщика надлежащим образом
  • Вместо использования категорий используйте ось datetime. Подробнее можно найти здесь here.

В родах я советую прочитать о axes (!) В Highcharts. Чем лучше вы понимаете библиотеку, тем лучшие результаты у вас будут.

+0

В результате я использовал [moment.js] (http://momentjs.com/), чтобы изменить дату в правильном формате. благодаря – rb195048

Смежные вопросы