Javascript 在HighCharts中使用JSON对象

我不熟悉HighCharts，我正在尝试找出如何将本地JSON对象读入HighCharts中的堆叠条形图。我相信我写了这个系列和类别，但由于某种原因，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文件调用

---

如果给出了什么错误？根本没有错误你说的“不工作”是什么意思？我在页面上没有看到任何东西，FireBug中也没有错误。你使用Web服务器还是用文件系统加载文件？这必须是一个外部json对象getJson无法访问，而且它不再是一个堆叠的条形图首先，检查$.get json是否被正确调用，或者是否看到已更新（复制）它仍然无法访问。另外，Angular.check js控制台似乎也不太好，这可能是路径相关的问题。你的json在哪里？它是在您的webapp还是应用程序文件夹/服务器文件夹中

[
  {
    "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
    ]
  }
]

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.