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

回答

相关问题