AmChartsドリルアップ機能はAngularJSと互換性がありませんか？

Question

UPDATE：

は、より良い問題を表現するための簡単なPlunkerを作成しました。

グラフの[リンクラベル]をクリックしても機能しません。

---

私はAmCharts Drillup機能に問題があり、以前のグラフの表示内容に戻ることができます。 私は作業中のAmChartsをレンダリングすることができますが、ドリルダウン機能ではドリルダウン機能を使用していますが、AngularJSでは機能しません。コンソールで

エラー：

......................... 
// add back link 
// let's add a label to go back to yearly data 
event.chart.addLabel(
    70, 10, 
    "< Go back", 
    undefined, 
    13, 
    undefined, 
    undefined, 
    undefined, 
    true, 
    'javascript:mostSoldDrillUp();'); <------- THIS IS THE LINK LABEL FOR DRILLUP 
................................. 

function mostReferralsDrillUp() { 
........... 
........... 
} 

事を、私が試した：

• を、私はそれをAmChart JSを入れてエラーがどこから来た

  

  c directitivelink functionでODEしかし EROR：キャッチされないにReferenceError：mostSoldDrillUpが
  で定義されていません：1：1は、ブラウザのコンソールでポップアップ表示されます。

• controllerに同じ出力エラーを入れようとしました。

• は単にJSファイルを含めるとui-router、同じ出力誤差を使用してcontrollerと htmlにdivにチャートのidを作ります。

  .state('home', { 
       url: '/', 
       templateUrl: './pages/home.html', 
       controller: 'HomeCtrl' 
      }) 
  

• 最終私は私のrouteでcontrollerを使用していないです。

  .state('home', { 
       url: '/', 
       templateUrl: './pages/home.html', 
       // controller: 'HomeCtrl' 
      }) 
  

それは動作しますが、私は他の目的のために、私のrouteためcontrollerを必要としているため、この方法であるとの単に外に出る。

誰かがアイデアを持っているか、経験したことがあるかもしれません。私はそれを喜んで受け入れます。ありがとう。

Answer 1

前述したように、AmChartsはAngularの$scopeについて何も知らず、ラベルリンクはwindowスコープでresetChartを呼び出していますが、コントローラではありません。これを回避するには、いくつかの方法があります。

1）グローバル/ windowスコープにresetChartを定義します。これにより、ラベルをチャート内に保持することができます。あなたがAngularのベストプラクティスに固執しようとしているなら、これは絶対に推奨されるアプローチではありませんが、うまくいくでしょう。

//inside controller 
window.resetChart = function() { 
    chart.dataProvider = chartData; 
    chart.titles[0].text = 'Yearly data'; 

    // remove the "Go back" label 
    chart.allLabels = []; 

    chart.validateData(); 
    chart.animateAgain(); 
} 

2）は、コントローラのスコープにresetChart方法を取り付け、外部の要素ではなく、チャートのラベルを使用するよりも、グラフのリセットを処理します。これはきれいに見えませんが、windowに何かを投げるよりも控えめではありません。もちろん、必要に応じてscript.js

chart.addListener("clickGraphItem", function(event) { 
    if ('object' === typeof event.item.dataContext.months) { 

    // set the monthly data for the clicked month 
    event.chart.dataProvider = event.item.dataContext.months; 

    // update the chart title 
    event.chart.titles[0].text = event.item.dataContext.category + ' monthly data'; 

    // validate the new data and make the chart animate again 
    event.chart.validateData(); 
    event.chart.animateAgain(); 
    $scope.isDrillDown = true; 
    } 
}); 

// function which resets the chart back to yearly data 
$scope.resetChart = function() { 
    chart.dataProvider = chartData; 
    chart.titles[0].text = 'Yearly data'; 

    // remove the "Go back" label 
    chart.allLabels = []; 

    chart.validateData(); 
    chart.animateAgain(); 
    $scope.isDrillDown = false; 
} 

の

home.html

<h1>HOME STATE</h1> 
<button ng-show="isDrillDown" ng-click="resetChart()">Go back to yearly</button> 
<div id="chartdiv"></div> 

抜粋を調整します。

はそれとは何かを持っているかもしれませんあなたのディレクティブ、については何も知らないので、それがグローバルスコープのドリルアップ機能を探している第二の方法here