Highcharts從JSON數據條形圖中angularJS

我有一個highcharts條形圖，其值從JSON，其格式如下收到：Highcharts從JSON數據條形圖中angularJS

"bargraph": 
    [ 
     { 
      "categories": "['S', 'M', 'T', 'W', 'T', 'F']", 
      "series1": "[800, 1100, 80, 1800, 1600, 2000]", 
      "series2": "[800, 1100, 80, 1800, 1200, 800]" 
     } 
    ]

如何能夠將這些價值觀爲我angularJS條形圖

HTML代碼：

<div id="bargraph" bargraph={{bargraph}}><\div>

指令：

angular.module('example').directive('bargraph', function() { 
    element.highcharts({ 

        xAxis: [ 
         { 
          categories: [] //embed categories value here 
         }, 
        series: [ 
         { 
          name: 'series1', 
          data: [] //Embed series1 data here 

         }, 
         { 
          name: 'series2', 
          data: [] //Embed series2 data here 
         } 
        ] 
    }) 
})

請提供一個嵌入json數據的合適方法。

來源

2013-11-26 Ronny K Roy

您需要使用指令這一點。搜索highcharts指令。 – Chandermani

你見過類似的話題http://stackoverflow.com/questions/15904739/rendering-highcharts-using-angular-js-directives？ –

這裏是一個指令，我從我的webapp複製和粘貼它是我如何使用指令呈現highcharts注意：並非所有的指令都適用於你，它的一些是特定於我所需要的，但你明白了。

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

    link: function (scope, element, attrs) { 
     var chart = null; 
     var chartsDefaults = { 
      chart: { 
       renderTo: element[0], 
       type: attrs.type || null, 
       height: attrs.height || null, 
       width: attrs.width || null, 
      }, 
      colors: scope.$eval(attrs.colors) || null, 
      title: { 
       style: { 
        display: 'none' 
       } 
      }, 
      xAxis: { 
       //categories: ['{"-7 days"|date_format}','{"-6 days"|date_format}','{"-5 days"|date_format}','{"-4 days"|date_format}', '{"-3 days"|date_format}', '{"-2 days"|date_format}', '{"-1 day"|date_format}', '{$smarty.now|date_format}'], 
       categories: scope.$eval(attrs.dates) || null, 
       gridLineDashStyle: 'ShortDot', 
       gridLineColor: "#C0C0C0", 
       gridLineWidth: 1, 
       labels: { 
        y: 27 
       } 
      }, 
      yAxis: { 
       title: { 
        text: null 
       }, 
       min: 0, 
       gridLineDashStyle: 'ShortDot', 
       gridLineColor: "#C0C0C0", 
       gridLineWidth: 1 
      }, 
      credits: { 
       enabled: false 
      }, 
      legend: { 
       enabled: false 
      }, 
      plotOptions: { 
       series: { 
        shadow: false, 
        lineWidth: 3 
       } 
      }, 
      tooltip: { 
       formatter: function() { 
        return '<b>' + this.series.name + '</b><br/>' + 
         this.x + ': ' + this.y + '</b>'; 
       } 
      } 
     }; 

     //Update when charts data changes 
     scope.$watch(attrs.value, function (newVal, oldVal) { 
      if (!newVal.length) return; 
      // We need deep copy in order to NOT override original chart object. 
      // This allows us to override chart data member and still the keep 
      // our original renderTo will be the same 
      var deepCopy = true; 
      var newSettings = {}; 
      chartsDefaults.series = newVal; 
      chartsDefaults.colors = scope.$eval(attrs.colors); 
      chartsDefaults.xAxis.categories = scope.$eval(attrs.dates); 
      console.log(chartsDefaults); 
      chart = new Highcharts.Chart(chartsDefaults); 
     }); 

    } 
} 
});

，這是它是如何使用的很明顯，你會改變「行」吧：

<chart value="stats.sets" dates="stats.days" colors="stats.colors" type="line"></chart>

來源

2013-12-13 02:53:46 btm1

Highcharts從JSON數據條形圖中angularJS

回答

相關問題