Как показать месяц и год в xAxis диаграммы datetime диаграммы высоких диаграмм

У меня есть тип диаграммы даты, отображаемый с использованием как угловых, так и высоких диаграмм. Значение даты возвращается из ответа JSON, как говорят 20120905 (YYYYMMDD). Поскольку я читал на многих форумах, я преобразовал свою дату в формат UTC для построения графика в графике. График построен правильно, но мой xaxis отображает значения UTC, такие как 1,370G для всех значений времени даты.Как показать месяц и год в xAxis диаграммы datetime диаграммы высоких диаграмм

$scope.chartConfig = { 
      options: { 
       chart: { 
        type: 'line', 
        zoomType: 'x' 
       } 
      }, 
      credits: { 
       enabled: false 
      }, 
      series: [{ 
       name: '% of Accounts', 
       data: outerSeries /* Contains the data similar to this. [[1368835200000, 2.9], [1371513600000, 0.5], [1374105600000, 1.94], [1376784000000, 1.44], [1379462400000, 1.18]] */ 
      }], 
      title: { 
      text: tableTitle 
      }, 
      xAxis: [{ 

       labels: {format: '{value:%Y}' }, 
       /*dateTimeLabelFormats:{ 
        month:'%Y', 
        year:'%Y' 
       },*/ 
       type:"datetime" 
      }], 
      yAxis: {title: {text: 'TestReport'}}, 
      tooltip: { 
       formatter: function() { 
       var myDate = new Date(this.x); 
       var newDateMs = Date.UTC(myDate.getUTCFullYear(),myDate.getUTCMonth()-1,myDate.getUTCDate()); 
       return '<b>'+ this.series.name +'</b><br/>'+Highcharts.dateFormat('%e. %b', newDateMs) +': '+ this.y;} 
      }, 
      //xAxis: {currentMin: 0, currentMax: 10, minRange: 1, title:{text:'Time Period'}}, 
      //xAxis: {ordinal:false,type:'datetime', dateTimeLabelFormats: { year: '%b%Y' }, title:{text:'Time Period'}}, 
      loading: false 
     } 
    });

источник

2013-10-03 googytech

Я думаю, что единственное, что вам нужно изменить, это конфигурация для xAxis.

Попробуйте следующее (только выделить часть XAxis):

$scope.chartConfig = { 
     // other configuration 
     xAxis: { 
      type:"datetime", 
      dateTimeLabelFormats:{ 
      month: '%b %e, %Y' 
      } // label in x axis will be displayed like Jan 1, 2012 
     }, 
     // other configuration 
}

Я использовал данные образцы и создали рабочую скрипку: http://jsfiddle.net/WEgmq/1/

Не стесняйтесь играть с скрипкой. И вы можете знать, что, если вы закомментируете type:"datetime", xAxis покажет ярлык, например, 1370G, как вы упомянули. Кроме того, поскольку интервал данных образца составляет один месяц, формат метки xAxis не будет изменен, если вы настроите формат day в dateTimeLabelFormats. Вместо этого вам необходимо настроить формат month, так как минимальный интервал составляет один месяц.

Играя с dateTimeLabelFormats, minTickInterval, вы можете получить то, что хотите.

источник

2013-10-03 22:54:02

Я попробовал то, что вы сказали. но я все еще получаю ту же проблему. Никаких изменений в моих ярлыках xaxis. – googytech

@ user544808 Я использовал ваши образцы данных и создал рабочую скрипту: http://jsfiddle.net/WEgmq/1/ Я также обновил ответ с некоторым объяснением о скрипке. Надеюсь, это может вам помочь. –

Также необходимо удалить: 'labels: {format: '{value:% Y}'},'. –

Я исправил те же проблемы, просто это здесь в jsFiddle

var app = angular.module('app', []); 
app.directive('myChart', function() { 
    return { 
     restrict: 'A', 
     replace: true, 

     template: '<div><div class="chart"></div><div><button id="btn">Click</button></div></div>', 
     link: function (scope, elem, attrs) { 
      elem.children(".chart").highcharts({ 
       xAxis: { 
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
       }, 

       series: [{ 
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
       }] 

      }); 
     } 
    } 
}); 
      }); 
     } 
    } 
});`

источник

2015-04-19 05:08:23

Как показать месяц и год в xAxis диаграммы datetime диаграммы высоких диаграмм

ответ

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