कोणीय यूआई Accorion (uib-Accordion) के भीतर गतिशील रूप से हाई चार्ट को कैसे लोड करें?

Question

मैं डेटा हो रही है, लेकिन मैं नीचे

दिया तरह, आईडी के आधार पर highchart को अगर मैं अकॉर्डियन यह आईडी के आधार पर highchart और टेबल दिखाना चाहिए पर क्लिक करें उन बाध्य करने के लिए है यहाँ मेरी कोड

<uib-accordion close-others="oneAtATime"> 
    <uib-accordion-group is-open="isopen" ng-init="isOpen = $first" class="acc-group" style="margin-bottom:0"> 
     <uib-accordion-heading ng-click="isopen=!isopen" class="header"> 
     <div><p class="boardRateHeading"><span style="color:#009688">{{board.city}}&nbsp;&nbsp;</span><span style="color:#607D8B;text-transform:uppercase;">{{board.name}}</span>&nbsp;&nbsp;<span>{{board.date | date:'MM/dd/yyyy'}}</span><span class="pull-right">₹{{board.price}}(<span ng-style="{{changeColor(board.change)}}"><i class="{{getIcon(board.change)}}" aria-hidden="true"></i>{{board.change}}</span>)</span></p></div> 
     </uib-accordion-heading> 
     <div class="row" style="margin-top:15px;" ng-repeat="data in boardData"> 
     <div class="col-md-8"> 
      <div id="container{{data.id}}"> 
       <img class="img-responsive mrg-auto" src="/Content/images/loading.gif" /> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <table class="table table-bordered table-condesed"> 
       <thead> 
        <tr> 
        <td>Date</td> 
        <td>In ₹</td> 
        </tr> 
       </thead> 
       <tbody> 
       <tr> 
        <td>{{data.date | date:'MM/dd/yyyy'}}</td> 
        <td>₹{{data.price}}({{board.change}})</td> 
       </tr> 
       </tbody> 
      </table> 
      </div> 
     </div> 
     </uib-accordion-group> 
    </uib-accordion> 

और नियंत्रक

  $http({ 
       method: "GET", 
       url: "/api/Board/getMapdataOnId", 
       params: { 
        id: parseInt(id) 
       } 
      }).then(function (response) { 
       var boardData = response.data; 
       var dateData = [], 
        rateData = []; 
       for (var i = 0; i < boardData.gData.length; i++) { 
        dateData.push(Date.parse(boardData.gData[i].date)); 
        rateData.push(boardData.gData[i].maxRate); 
       } 
       Highcharts.chart('container' + parseInt(id), { 
        chart: { 
         zoomType: 'x' 
        }, 
        title: { 
         text: '' 
        }, 
        subtitle: { 
         text: document.ontouchstart === undefined ? 
          'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in' 
        }, 
        credits: { 
         enabled: false 
        }, 
        xAxis: { 
         categories: dateData, 
         type: 'datetime', 
         labels: { 
          autoRotation: [-90], 
          formatter: function() { 
           return Highcharts.dateFormat('%b', this.value) + ', ' + Highcharts.dateFormat('%d', this.value); 
          } 
         }, 
         title: { 
          text: 'Date' 
         } 
        }, 
        yAxis: { 
         allowDecimals: true, 
         gridLineWidth: 1, 
         labels: { 
          formatter: function() { 
           return this.value; 
          } 
         }, 
         //  minorTickInterval: 1, 
         title: { 
          text: 'Price in ' + boardData.gData[0].currency 
         } 
        }, 
        tooltip: { 
         formatter: function() { 
          return '<b>Rates on </b><br/>' + 
           Highcharts.dateFormat('%b', this.x) + ', ' + Highcharts.dateFormat('%d', this.x) + ' <br/>' + boardData.gData[0].currency + '' + this.y; 
         } 
        }, 
        plotOptions: { 
         area: { 
          fillColor: { 
           linearGradient: { 
            x1: 0, 
            y1: 0, 
            x2: 0, 
            y2: 1 
           }, 
           stops: [ 
            [0, Highcharts.getOptions().colors[0]], 
            [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')] 
           ] 
          }, 
          marker: { 
           radius: 2 
          }, 
          lineWidth: 1, 
          states: { 
           hover: { 
            lineWidth: 1 
           } 
          }, 
          threshold: null 
         } 
        }, 
        series: [{ 
         data: rateData, 
         type: 'area', 
         showInLegend: false 
        }] 
       }); 
      }, function (response) { 
       console.log(response.statusText); 
      }); 

Answer 1

जा एनजी-क्लिक डेटा गुजर नहीं करना चाहिए है इस

<uib-accordion-heading ng-click="open({{data.id}})" class="header"> 

फिर खुला समारोह में

, जैसे

function open(id) { 
    $http({ ..... }); 
} 

Answer 2

कैसे चार्ट जहां चार्ट विकल्प और चार्ट कंटेनर वहाँ बनाने के लिए एक नया निर्देश बनाने के बारे में।

<example-highchart></example-highchart> 

exampleHighchart.js

(function() { 
    'use strict'; 
    angular 
    .module('yourModule') 
    .directive('exampleHighchart', exampleHighchart); 

function exampleHighchart() { 
    return { 
    templateUrl: 'example-highchart.template.html', 
    restrict: 'E', 
    scope: { 
     id: '=' 
    }, 
    replace: 'true', 
    link: linkFn 
    }; 

    function linkFn(scope, element) { 
    element.find('.highchart-element').highcharts(createOptions()); 

    function createOptions() { 
     // your chart option goes here 
    } 

    function updateChartData() { 
     // you can start the loading animation here 
     // and then hide it in the the then block 

     // get the highchart element reference to update the properties. 
     var chart = element.find('.highchart-element').highcharts(); 
     $http({ 
     method: "GET", 
     url: "/api/Board/getMapdataOnId", 
     params: { 
      id: parseInt(id) 
     } 
     }).then(function (response) { 
     var boardData = response.data; 
     var dateData = [], rateData = []; 
     for (var i = 0; i < boardData.gData.length; i++) { 
      dateData.push(Date.parse(boardData.gData[i].date)); 
      rateData.push(boardData.gData[i].maxRate); 
     } 
     // update the categories info and the series data 
     chart.xAxis[0].setCategories(dateData); 
     chart.series[0].setData(rateData); 
     }); 
    } 
    } 
} 

})(); 

highchart-example.template.html:

<div> 
    <!-- you can add your loading gif here and display it while it's loading --> 
    <div class="example-highchart" /> 
<div> 

Answer 3

फोन मत करो एनजी-क्लिक करें रूप में

<uib-accordion-heading ng-click="open({{data.id}})" class="header"> 

यह होना चाहिए

के रूप में

<uib-accordion-heading ng-click="open(data.id)" class="header">