在HighCharts中使用JSON对象

Question

我是HighCharts的新手，我试图弄清楚如何在HighCharts中将本地JSON对象读入我的堆积条形图中。我相信我写了系列和类别，但由于某种原因getJson函数不起作用。

角JS文件

function get_chart() { 
    return { 
     chart: { 
      type: 'column' 
     }, 
     title: { 
      text: 'Twitter Data' 
     }, 
     xAxis: { 
      categories: [] 
     }, 

     plotOptions: { 
      series: { 
       stacking: 'normal', 
       dataLabels: { 
        enabled: true, 
        style: { 
         textShadow: '0 0 3px black' 
        } 
       }, point: { 
        events: { 
         click: function() { 
          alert('Category: ' + this.category + ', value: ' + this.y); 
         } 
        } 
       } 
      } 

     }, 

     series: [] 

    }, 
    $.getJSON("js/data.json", function(json) { 
     options.xAxis.categories = json[0]['data']; 
     options.series[0] = json[1]; 
     options.series[1] = json[2]; 
     chart = new Highcharts.Chart(options); 
    }); 
} 

var app = angular.module('charts', []); 

app.directive('highchart', [function() { 
    return { 
     restrict: 'E', 
     template: '<div></div>', 
     replace: true, 
     link: function (scope, element, attrs) { 

      scope.$watch(attrs.chart, function() { 

       if (!attrs.chart) return; 

       var chart = scope.$eval(attrs.chart); 

       angular.element(element).highcharts(chart); 
      }); 

     } 
    } 
}]); 

function Ctrl($scope) { 
    $scope.example_chart = get_chart(); 
} 

JSON对象

[ 
    { 
    "name": "Month", 
    "data": [ 
     "Jan", 
     "Feb", 
     "Mar", 
     "Apr", 
     "May", 
     "Jun", 
     "Jul", 
     "Aug", 
     "Sep", 
     "Oct", 
     "Nov", 
     "Dec" 
    ] 
    }, 
    [ 
    { 
     "name": "Overhead", 
     "data": [ 
     21990, 
     22365, 
     21987, 
     22369, 
     22558, 
     22987, 
     23521, 
     23003, 
     22756, 
     23112, 
     22987, 
     22897 
     ] 
    } 
    ], 
    { 
    "name": "Revenue", 
    "data": [ 
     23987, 
     24784, 
     25899, 
     25569, 
     25897, 
     25668, 
     24114, 
     23899, 
     24987, 
     25111, 
     25899, 
     23221 
    ] 
    } 
] 

Answer 1

通过外部JSON文件调用See Plunker demo

function get_chart() { 
var options = { 
    chart: { 
     type: 'column', 
     renderTo:'container' 
    }, 
    title: { 
     text: 'Twitter Data' 
    }, 
    xAxis: { 
     categories: [] 
    }, 

    plotOptions: { 
     series: { 
      stacking: 'normal', 
      dataLabels: { 
       enabled: true, 
       style: { 
        textShadow: '0 0 3px black' 
       } 
      }, point: { 
       events: { 
        click: function() { 
         alert('Category: ' + this.category + ', value: ' + this.y); 
        } 
       } 
      } 
     } 

    }, 

    series: [] 

}; 
$.getJSON("results.json", function(json) { 
    options.xAxis.categories = json[0]['data']; 
    options.series[0] = json[1]; 
    options.series[1] = json[2]; 
    chart = new Highcharts.Chart(options); 
    }); 
    } 
    get_chart(); //call this get_chart function in your controller where you want, I called it here.