2016-09-15 4 views
1

Привет У меня есть данные json, подобные этому. Я использую angularjshighcharts bar graph from json

[ 
    { 
    category: "NWSC Banepa", 
    value: 32.91 
    }, 
    { 
    category: "NWSC Bhadrapur", 
    value: 54.83 
    }, 
    { 
    category: "NWSC Biratnagar", 
    value: 24.81 
    }, 
    { 
    category: "NWSC Dharan", 
    value: 98.41 
    }, 
    { 
    category: "NWSC Gaur", 
    value: 10.69 
    }, 
    { 
    category: "NWSC Gaushala", 
    value: 93.84 
    } 
] 

Как я могу генерировать гистограмму из таких данных, пожалуйста, помогите я новичок в highchart

+0

Вот хорошая статья об этом: http://www.highcharts.com/blog/194-using-highcharts-with-angular-js – Anas

+0

И вот хорошая директива, а также https: // g ithub.com/pablojim/highcharts-ng – Anas

+0

проверить это - http://www.highcharts.com/demo/bar-basic – Disha

ответ

0

Привет всем спасибо, я решил его как этот

на мой взгляд

<hc-chart chart='{{chartOptions}}'>Placeholder for generic chart</hc-chart> 

и я создал директиву

.directive('hcChart', function() { 
    return { 
     restrict: 'E', 
     template: '<div></div>', 
     replace: true, 

     link: function (scope, element, attrs) { 

      scope.$watch(function() { return attrs.chart; }, function() { 

       if (!attrs.chart) return; 

       var charts = JSON.parse(attrs.chart); 

       $(element[0]).highcharts(charts); 

      }); 
     } 
    }; 
}); 

и мой контроллер

 .success(function(water_coverage) { 

       var score = []; 
       for (var i = 0; i < water_coverage.length; i++) { 
        score.push(water_coverage[i].value); 
       } 

       var wspName = []; 
       for (var i = 0; i < water_coverage.length; i++) { 
        wspName.push(water_coverage[i].category); 
       } 

       $scope.chartOptions = { 
        chart: { 
         type: 'bar' 
        }, 
        title: { 
         text: 'Title' 
        }, 
        xAxis: { 
         categories: wspName 
        }, 
        series: [{ 
         data: score 
        }], 
       }; 
      }) 
0

Я работаю в настоящее время на Highcharts, я использую формат JSON, как в примере Highcharts. Смотрите, если это помогает:

[{ "имя": "0-18", "данные": [1000000] }, { "имя": "18-35", "данные": [2500000] }, { "название": "35-50", "данные": [2000000] }, { "название": "50 и выше", "данные": [1000000] }]