在HighCharts中使用JSON对象 [英] Using a JSON Object in HighCharts

问题描述

我是HighCharts的新手，我想知道如何将本地JSON对象读入HighCharts中的堆积条形图。我相信我编写了系列和类别，但由于某种原因，getJson函数无法正常工作。
$ b Angular JS File

 函数get_chart（）{
 return {
图：{
类型：'列'
} ，
 title：{
 text：'Twitter Data'
}，
 xAxis：{
 categories：[] 
}，
 
 plotOptions：{
系列：{
堆叠：'普通'，
 dataLabels：{
启用：true，
样式：{
 textShadow ：'0 0 3px black'
} 
}，点：{
 events：{
 click：function（）{
 alert（'Category：'+ this .category +'，value：'+ this.y）; 
} 
} 
} 
} 
 
}，
 
系列：[] 
 
 }，
 $ .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>'，
替换为：true，
 link：函数（范围，元素，attrs）{
 $ b $ scope。$ watch（attrs.chart，function（）{
 
 if（！attrs.chart）return; 
 
 var chart = scope。$ eval（attrs.chart）; 
 
 angular.element（element ）.highcharts（chart）; 
}）; 
 
} 
} 
}]）; 
 
函数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，$ b 23112，
 22987，
 22897 
 
 
 
 $ b $ name b 
 
 
 
 
 
 
 
 
 
 $ 
 24784，
 25899，
 25569，
 25897，
 25668，
 24114，
 23899，
 24987，
 25111，
 25899，
 2 3221 
] 
} 
] 
  

解决方案通过外部json文件调用查看Plunker演示

  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 ）; 
} 
} 
} 
} 
 
}，
 
系列：[] 
 
 }; 
 $ .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（）; //在你想要的控制器中调用这个get_chart函数，我在这里调用它。 
  

I am new to HighCharts and I am trying to figure out how to read a local JSON object into my stacked bar graph in HighCharts. I believe I wrote the series and categories but for some reason the getJson Function is not working.

Angular JS File

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 Object

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

解决方案

Calling via external json file 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.

这篇关于在HighCharts中使用JSON对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！