ChartFactoryを使用して> High 5.02以上のハイチャートを使用したハイチャートの作成

Question

5.0.0以前のハイチャートとhighcharts-ngバージョン0.0.12からの移行最新のバージョンに変更してください。

チャートオブジェクトに重要な変更が加えられていることと、最新バージョンでhighcharts-ngがどのように動作するかが分かっています。私はこれらの最新バージョンを使用してAngular環境を設定する方法の例を探していましたが、これらのバージョンを使用するリソースが大幅に不足しているようです。

私はあなたがこれを設定するのを手伝ってくれることを願っていました。

私は多くの変更を自分で試みましたが、以前のバージョンのスクリプトでは得られなかったエラーが発生しています。

1. "Unable to get property of 'series' of undefined or null reference (at $doCheck (http://localhost:50262/app/vendorScripts/highcharts-ng.js:51:16))"、
2. "Cannot set property 'getChartObj' of undefined" (at HighChartNGController.$onInit (highcharts-ng.js:36))、
3. "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 
       }; 
      } 
     }; 
    }); 

これは私が私の角コントローラでグラフを作成する方法を次のとおりです。

1. 私は
2. 私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

最初の2つのエラー：

Cannot set property 'getChartObj' of undefined

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

あなたのconfigオブジェクトが定義されていない場合に発生。あなたのケースでは

---

、あなたがあなたの$scope

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

に宣言した同じ変数を使用する必要があります（資本V）