Блог

Мне нравится передавать дату из шаблона представления / может быть из контроллера, чтобы 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 гистограммы, подобные

• первая панель highchart расширена до 10
• вторая панель highchart расширена до 12
• Третья полоса хай-чарта расширилась до 32

Если вы увидите плунжер, вы получите больше представления о том, о чем я говорю.

демонстрация plunker

Использованный https://github.com/pablojim/highcharts-ng для <highcharts />

Попробуйте https://github.com/pablojim/highcharts-ng

Вам нужно создать директиву, которая переносит элемент highchart. У вас проблема с областью видимости с angular и highcharts.