时间戳

首页 > 解决方案 > 使用 Angular JS 在高图表上绘制两条带有 JSON 数据的线的问题 - 名称未定义

angularjs - 使用 Angular JS 在高图表上绘制两条带有 JSON 数据的线的问题 - 名称未定义

问题描述

尝试使用 Angular JS 动态绘制高图表。我有两条线要绘制在同一张图上。

'jsondata' 中的示例项目：

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

在高图表配置文件中，名称被应用在系列中，但不在数据属性中。所以 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 & Purchase"
   }
}

但我希望这张图上有多个折线图，因此有多个数据属性

标签： angularjshighcharts

解决方案

在您的图表配置中，系列数组只有一个元素。“SalesAgeBucket10”没有任何内容。我没有您的代码，因此无法在我这边重现问题，但可以建议尝试以下操作。将高图表配置中的系列数组修改为：

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

推荐阅读