使用ng-repeat的Highcharts（highcharts-ng）可以工作，但是需要通過屬性傳遞每個圖表的數據

Question

我喜歡從視圖模板傳遞日期，也可以從控制器傳遞日期，以便highchart應該映射<highchart />指令給出的數據。

說明：

<ul>
      <li ng-repeat="li in list">
                <highchart id="chart1" 
                           config="chart"  
                           chartTitle="{{li.name}}"  
                           kpiValue="{{li.data}}">
                 </highchart>
            </li>
        </ul>

在我的控制器中，我有如下代碼

myapp.controller('myctrl', function ($scope) {
    $scope.list = [
     {data:10,name:'first KPI',type:"bar"}, /*Make a bar chart of title 'first KPI', with a bar length to 10 */ 
     {data:12,name:'sec KPI',type:"bar"}, /*Make a bar chart of title 'sec KPI',with a bar length to 12 */ 
     {data:32,name:'third KPI',type:"bar"} /*Make a bar chart of title 'third KPI',with a bar length to 32 */ 
    ];
....
....

$scope.chart = {
        options: {
            chart: {
                type: 'bar'
            }
        },
        series: [{
            data: [10] //to make accepts the values dynamically from <highcharts />, Need help
        }],
        title: {
            text: 'Hello' //to make accepts the values dynamically from <highcharts />, Need help
        },
        loading: false
    }
});

我要說的是，我想要3個條形圖

• 第一個高圖欄擴展到10
• 第二高圖欄擴展到12
• 第三高圖欄擴大到32

如果您看到了unk小子，您將對我在說什么有更多的了解。

朋克演示

將https://github.com/pablojim/highcharts-ng用於<highcharts />

Answer 1

嘗試https://github.com/pablojim/highcharts-ng

您需要創建包裝highchart元素的指令。 您遇到了角度圖和高圖的范圍問題。