Как получить год по датам и использовать его в диаграмме angularjs

Привет, я работаю над диаграммами angularjs. Здесь данные для отображаемой диаграммы находятся в date format ("dd-mm-yyyy"), из date мне нужно получить year и отобразить их на диаграмме. Но я не уверен, как получить только year из предоставленных данных. На изображении диаграммы ось x представляет доли за определенный год, а ось y представляет процент. На опубликованном изображении вы можете видеть красную рамку вдоль оси Y, которая отображает полные date, вместо этого я хочу отображать только год по оси Y. Помогите мне, пожалуйста.

HTML:

<html>
<head>
  <title> 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-charts/0.2.7/angular-charts.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.js"></script>
  </title>
  <body>
  <div ng-app="chartApp" ng-controller="chartController">
    <canvas width="600" height="400" type="column2d" dataformat="json"
               dataSource="{{myDataSource}}"></canvas>
   </div>
   </body>
   </html>

Контроллер:

var chartApp =angular.module("chartApp",["chart.js"]);
chartApp.controller("chartController",function($scope){

$scope.myDataSource = {
          chart:{ caption : "Share Check with previous years"},
          data :[{
                  label: "26/01/2010/", 
                  value: "80"},

                 {label : "26/01/2011" ,
                  value : "70"},

                 {label : "26/01/2012",
                  value : "52"},

                 {label : "26/01/2013",
                  value : "5"},

                 {label : "26/01/2014",
                  value : "33"},

                 {label : "26/01/2015",
                  value : "47"}]};
           });

На изображении ось X представлена ​​в процентах, а ось Y представляет год продаж


angularjs fusioncharts angular-chart
person jazzoria    schedule 07.02.2017    source источник
comment
не могли бы вы предоставить свою скрипку   -  person Saurabh Agrawal    schedule 07.02.2017
comment
У меня есть скрипка, но она не работает   -  person jazzoria    schedule 07.02.2017
comment
Хорошо, но я смогу помочь вам только после того, как получу скрипку, потому что этот код не работает в моей системе.   -  person Saurabh Agrawal    schedule 07.02.2017
comment
Хорошо, я опубликую свою скрипку, чтобы вы могли внести изменения, если это необходимо   -  person jazzoria    schedule 07.02.2017
comment
Ага, попробую решить :)   -  person Saurabh Agrawal    schedule 07.02.2017
comment
привет, это скрипка, https://jsfiddle.net/329hus9s/   -  person jazzoria    schedule 07.02.2017
comment
jsfiddle.net/y3H2G/2141 это отредактированная диаграмма так выглядит моя текущая диаграмма   -  person jazzoria    schedule 07.02.2017

Ответы (2)


arrow_upward
1
arrow_downward

Почему бы вам просто не изменить data, прежде чем назначать его диаграмме?

var data = [{
  "label": "20/11/2012",
  "value": "880000"
}];

angular.forEach(data, function(item) {
  item.label = item.label.split('/')[2];
});

$scope.myDataSource.data = data;
person Mikko Viitala    schedule 07.02.2017

arrow_upward
1
arrow_downward

На данный момент FusionCharts не позволяет напрямую манипулировать значениями даты и времени.

Хотя для описанного вами сценария этого можно добиться, разделив data.label (значение даты) на значения года.

Вы можете проверить этот JSFiddle с вашими данными для того же.

person sikrigagan    schedule 08.02.2017