使用 Highcharts >= 5.0.0 和 highcharts-ng >= 1.0.0 使用 ChartFactory 创建具有 Angular 的 Highcharts

Question

我想从 5.0.0 版之前的 Highcharts 和 highcharts-ng 0.0.12 版过渡到最新版本。

我知道图表对象以及 highcharts-ng 在最新版本中的工作方式发生了一些重大变化。我一直在寻找有关如何使用这些最新版本设置我的 Angular 环境的示例，但使用这些版本的资源似乎非常短缺。

我希望你能帮我设置一下。

我自己尝试了很多更改，但我总是遇到旧版本脚本没有遇到的错误。错误如：

"Unable to get property of 'series' of undefined or null reference (at $doCheck (http://localhost:50262/app/vendorScripts/highcharts-ng.js:51:16))",
"Cannot set property 'getChartObj' of undefined" (at HighChartNGController.$onInit (highcharts-ng.js:36)),
"Multiple definitions of a property not allowed in strict mode (ChartFactory)"

这是我的最新版本之前的工作解决方案：

这是我的 ChartFactory：

'use strict';

angular.module('portalDashboardApp')
  .factory('ChartFactory', function () {

      return {
          getChartConfig: function () {
              return {
                  options: {
                      chart: {
                          type: 'bar',
                          height: 400,
                          spacingTop: 30,
                          spacingBottom: 10,
                          spacingLeft: 10,
                          spacingRight: 50,
                          zoomType: 'x',
                          backgroundColor: false,
                          resetZoomButton: {
                              position: {
                                  x: 0,
                                  y: 40
                              }
                          }
                      },
                      credits: {
                          enabled: false
                      },
                      navigation: {
                          buttonOptions: {
                              y: -30
                          }
                      },
                      tooltip: {
                          formatter: function () {
                              return '<b>' + this.y + ' ' + this.series.name + '</b>';
                          }
                      },
                      plotOptions: {
                          column: {
                              stacking: ''
                          },
                          pie: {
                              allowPointSelect: true,
                              cursor: 'pointer',
                              dataLabels: {
                                  enabled: true,
                              },
                              showInLegend: true
                          },
                          series: {
                              animation: true,
                              point: {
                                  events: {
                                      click: function () {

                                      }
                                  }
                              },
                              dataLabels: {
                                  enabled: true,
                                  format: ''
                              }
                          }
                      },
                      exporting: {
                          sourceWidth: 1600,
                          sourceHeight: 800,
                          // scale: 2 (default)
                          chartOptions: {
                              subtitle: null
                          },
                          buttons: {
                              contextButton: {
                                  text: 'Export Chart'
                              }
                          }
                      }
                  },
                  title: {
                      text: false
                  },
                  xAxis: {
                      type: 'category'
                  },
                  yAxis: {
                      gridLineWidth: 1,
                      title: {
                          text: 'Count'
                      },
                      labels:
                      {
                          enabled: true,
                          format: '{value}'
                      }
                  },
                  legend: {
                      layout: 'vertical',
                      floating: true,
                      backgroundColor: '#FFFFFF',
                      align: 'right',
                      verticalAlign: 'top',
                      y: 60,
                      x: -60
                  },
                  series: [{}],
                  loading: false
              };
          }
      };
  });

这就是我在 Angular 控制器中创建图表的方式：

我会注入我的 ChartFactory
通过 mt API 调用获取我的数据

然后使用这些方法为我的图表设置、自定义和应用我的数据：

function volumeGraphConfig(timeline_data, time_trend) {
    $scope.VolumeGraphChartConfig = ChartFactory.getChartConfig();
    $scope.VolumeGraphChartConfig.chart.type = 'column';
}

function populateVolumeData(timeline_data, time_trend) {

    $scope.VolumeGraphChartConfig.xAxis.categories = timeline_data;

    $scope.VolumeGraphChartConfig.series = [{
        name: 'Twitter',
        data: time_trend.Twitter,
        color: twitterColor
    }, {
        name: 'Instagram',
        data: time_trend.Instagram,
        color: instagramColor
    }, {
        name: 'Youtube',
        data: time_trend.Youtube,
        color: youtubeColor
    }];

    $scope.VolumeGraphChartConfig.tooltip = {
        pointFormat: '<span style="color:{series.color}">{series.name}</span>: <strong>{point.y}</strong> mentions<br/>',
        shared: false
    };
}

然后我将使用此 HTML div:

显示我的图表

<highchart id="FacebookVolume" config="volumeGraphChartConfig"></highchart>

如何更改它以使用最新版本？谢谢！

Answer 1

前两个错误：

Cannot set property 'getChartObj' of undefined

Unable to get property of 'series' of undefined or null reference

当您的配置对象未定义时发生。

对于您的情况，您需要使用在 $scope

中声明的相同变量

<highchart id="FacebookVolume" config="VolumeGraphChartConfig"></highchart>

(大写V)

使用 Highcharts >= 5.0.0 和 highcharts-ng >= 1.0.0 使用 ChartFactory 创建具有 Angular 的 Highcharts

Creating Highcharts with Angular using Highcharts >= 5.0.0 and highcharts-ng >= 1.0.0 using a ChartFactory

javascript

highcharts

angularjs

highcharts-ng