Диаграмма Sparkline Highcharts с динамическими данными c для таблицы - Angular js

Question

Я пытаюсь нарисовать график Sparkline в таблице. Я просто следовал примеру, показанному в демонстрации Highcharts Sparkline. Я хочу нарисовать 2 столбца данных и 3 столбца с диаграммой. Но вместо stati c данных я использовал ng-repeat in

<tr ng-repeat="tablerowdata in tablearray>
   <td ng-repeat="(key,value) in tablerowdata" data-sparkline="{{value}}" >

Когда я пытаюсь отобразить значение с выражением снаружи, отображаются данные td, но данные не передаются на диаграмму Sparkline.

Пример I следовал: https://www.highcharts.com/demo/sparkline

Как передать данные Dynami c с парой ключ-значение, где значение ключа - значение xaxis, а значение - данные.

Answer 1

angular.module('chartApp', [])
  .controller('ChartController', function($scope,$timeout) {
  
  $scope.contcat_list = [
    {name:'Abdo Hamoud', chart:'1,5,4,2,5,9,3'},
    {name:'Mahmoud Ali', chart:'1,0,7,7,5,9,4'},
    {name:'Tamer Hassan', chart:'1,4,3,7,5,9,3'},
    {name:'Ahmed Sabry', chart:'1,4,0,7,5,9,7'},
    {name:'Khaled Said', chart:'1,0,7,4,5,9,8'}
  ];
  
    $timeout(function(){ $('.inlinesparkline').sparkline(); },100)
  
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://omnipotent.net/jquery.sparkline/2.1.2/jquery.sparkline.min.js"></script>



<div ng-app="chartApp">
  <div ng-controller="ChartController">

    <table style="table-layout:fixed; width:100%;">
      <thead>
        <tr>
          <th>Name</th>
          <th>Chart</th>
        </tr>
      </thead>

      <tbody>
        <tr ng-repeat="row in contcat_list">
          <td>{{row.name}}</td>
          <td><div class="inlinesparkline">{{row.chart}}</div></td>
        </tr>
      </tbody>

    </table>

  </div>

</div>