Проблемы с построением двух строк с данными JSON на высокой диаграмме с использованием Angular JS - name undefined

#angularjs #highcharts

#angularjs #высокие диаграммы

Вопрос:

Попытка динамического построения верхнего графика с использованием Angular JS. У меня есть две строки, которые я хочу построить на одном графике.

Пример элемента в ‘jsondata’:

 {
  "ID": 123456,
  "SaleDate": "2016-02",
  "SalesAgeBucket5": "NULL",
  "SalesAgeBucket10": 19300000,
  "SalesAgeBucket15": "NULL",
  "SalesAgeBucket20": "NULL",
  "SalesAgeBucket25": "NULL"
}

В файле конфигурации high chart имя применяется в серии, но не в атрибуте данных. Таким образом, SalesAgeBucket5 отображается со всеми данными, но они не группируются. Я вижу только одну строку со всеми данными, построенными против этой серии.

     $scope.chartConfig.series[0].name = "SalesAgeBucket5";
$scope.chartConfig.series[0].data  = jsondata.map(item => item["SalesAgeBucket5"]);
$scope.chartConfig.series[1].name = "SalesAgeBucket10";
$scope.chartConfig.series[1].data  = jsondata.map(item => item["SalesAgeBucket10"]);
$scope.chartConfig.xAxis.categories = jsondata.map(item => item[Object.keys(jsondata[0].SaleDate)]);

 > angular.min.js:124 TypeError: Cannot set property 'name' of undefined
    at b.$scope.getData (main.js:25699)
    at fn (eval at compile (angular.min.js:242), <anonymous>:4:141)
    at e (angular.min.js:288)
    at b.$eval (angular.min.js:151)
    at b.$apply (angular.min.js:151)
    at HTMLSpanElement.<anonymous> (angular.min.js:288)
    at HTMLSpanElement.dispatch (jquery.min.js:3)
    at HTMLSpanElement.v.handle (jquery.min.js:3)

Вывод конфигурации высокой диаграммы:

   {
   "chart":{
      
   },
   "plotOptions":{
      "line":{
         "dataLabels":{
            "enabled":false
         },
         "enableMouseTracking":true
      }
   },
   "series":[
      {
         "data":["null","null",140000,"null" etc... INCLUDES ALL VALUES],
         "id":"Results1",
         "turboThreshold":0,
         "name":"SalesAgeBucket5"
      }
   ],
   "xAxis":{
      "categories":""
   },
   "title":{
      "text":"Sales amp; Purchase"
   }
}

но я ожидаю, что на этом графике будет несколько линейных диаграмм, поэтому несколько атрибутов данных

1. Проверьте значение в $scope.chartConfig.series[1]

2. Я проверил через журнал консоли, и там написано «не определено». Не уверен, почему он не создает вторую серию, все еще не могу заставить ее работать.

Ответ №1:

В вашей конфигурации диаграммы массив рядов содержит только один элемент. Для «SalesAgeBucket10» ничего нет. У меня нет вашего кода, поэтому я не могу воспроизвести проблему на своей стороне, но могу предложить попробовать следующее. Измените массив рядов в конфигурации высокой диаграммы на:

 "series":[
      {
         
         "id":"Results1",
         "turboThreshold":0,             
      },
      {
         
         "id":"Results2",
         "turboThreshold":0,             
      }
   ],