Javascript 在HighCharts中使用Websocket JSON_Javascript_Jquery_Json_Angularjs_Highcharts

Javascript 在HighCharts中使用Websocket JSON

javascript jquery json angularjs highcharts

Javascript 在HighCharts中使用Websocket JSON,javascript,jquery,json,angularjs,highcharts,Javascript,Jquery,Json,Angularjs,Highcharts,因此，我有一个Websocket，它将数据发送回我，我需要将这些数据吸收到我的HighCharts堆叠条形图中，但我无法让它工作。我看到JSON对象正在返回，我只是不知道如何将它的值映射到Categories[]和Series[] js文件 var randomData; function get_chart() { var options = { chart: { type: 'column',

因此，我有一个Websocket，它将数据发送回我，我需要将这些数据吸收到我的HighCharts堆叠条形图中，但我无法让它工作。我看到JSON对象正在返回，我只是不知道如何将它的值映射到Categories[]和Series[]

js文件

var randomData;

    function get_chart() {
        var options = {
            chart: {
                type: 'column',
                renderTo: 'container',
                events: {
                    load: function () {
                        randomData = this.series[0];
                    }
                }
            },
            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: []

        };


    }
    get_chart();

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

    app.directive('highchart', [function () {
        return {
            restrict: 'E',
            template: '<div id="container">',
            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();
    }

index.html

<!DOCTYPE html>
<html>
<head>
    <title>AngularJS + Highcarts </title>
</head>
<body>

<section ng-app='charts'>
    <div ng-controller="Ctrl">
        <highchart chart='example_chart'></highchart>
    </div>
</section>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="js/webSocket.js"></script>
<script type="text/javascript" src="js/highChartStyle.js"></script>
<script type="text/javascript" src="js/highChartAngular.js"></script>
</body>
</html>

试试这个

   $.each(json, function(item,val) {
    console.log(val.series);
    options.xAxis.categories = val.x_axis_labels;
    options.series=val.series;
    chart = new Highcharts.Chart(options);
  });

请参阅此Plunk，在websocket中调用此函数

   $.each(json, function(item,val) {
    console.log(val.series);
    options.xAxis.categories = val.x_axis_labels;
    options.series=val.series;
    chart = new Highcharts.Chart(options);
  });

请参见plunker在websocket中调用此函数

您从何处获得此results.json？我将您的数据放在results.json中，因此我要做的是捕获上面通过我编写的websocket.js看到的json。将其存储到一个变量中，然后将该变量加载到HighChartswebsocket.onmessage=function（event）{console.log（event.data）；var jsondata=event.data}中从webscket接收数据的位置，在上面的代码中，你从哪里得到这个results.json？我把你的数据放在results.json中，所以我要做的是捕获你在上面看到的通过我编写的websocket.js得到的json。将其存储到一个变量中，然后将该变量加载到HighChartswebsocket.onmessage=function（event）{console.log（event.data）；var jsondata=event.data}中，在上面的代码中，从webscket接收数据

   $.each(json, function(item,val) {
    console.log(val.series);
    options.xAxis.categories = val.x_axis_labels;
    options.series=val.series;
    chart = new Highcharts.Chart(options);
  });