将Websocket JSON与HighCharts结合使用

Question

So I have a Websocket that is sending me back data in which I need to ingest into my HighCharts Stacked bar diagram, but I am unable to get it working. 因此，我有一个Websocket正在向我发送回数据，我需要将这些数据提取到我的HighCharts Stacked条形图中，但是我无法使其正常工作。 I see that the JSON object is being returned I just dont know hot to map its values up with the Categories[], and Series[] 我看到正在返回JSON对象，但我不知道该如何使用Categories []和Series []映射其值

js file 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();
    }

webSocket.js webSocket.js

// This code needs tio be changed to use a pub/sub method of data retrieval

var wsUri = "test";
var jsonObject = "";

function init() {
    testWebSocket();
}

function testWebSocket() {
    websocket = new WebSocket(wsUri);
    websocket.onopen = function(evt) {
        onOpen(evt)
    };
    websocket.onclose = function(evt) {
        onClose(evt)
    };
    websocket.onmessage = function(evt) {
        onMessage(evt)
        testObject();
    };
    websocket.onerror = function(evt) {
        onError(evt)
    };
}

function onOpen(evt) {
    console.log("CONNECTED");
    doSend('{"request":"getTweetCountChartsForUser"}');
}

function onClose(evt) {
    console.log("DISCONNECTED");
}

function onMessage(evt) {
    console.log("Message: " + evt.data);
    jsonObject = evt.data;
    console.log("json object: " + jsonObject);
    return jsonObject;
    //  websocket.close();
}

function onError(evt) {
    console.log("Error:" + evt.data);
}

function doSend(message) {

    console.log("SENT: " + message);
    websocket.send(message);
}

function testObject() {

    console.log(jsonObject);
}

window.addEventListener("load", init, false);

index.html 的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>

Returned JSON 返回的JSON

[
  {
    "title": "Tweets",
    "y_axis_label": "Number of Tweets",
    "x_axis_labels": [
      "12AM-06AM",
      "06AM-12PM",
      "12PM-06PM",
      "06PM-12AM"
    ],
    "series": [
      {
        "name": "Tweets",
        "data": [
          8,
          1,
          2,
          0
        ]
      },
      {
        "name": "Retweets",
        "data": [
          8679,
          4692,
          2105,
          0
        ]
      },
      {
        "name": "Replies",
        "data": [
          3427,
          789,
          1391,
          0
        ]
      },
      {
        "name": "Quotes",
        "data": [
          284,
          66,
          73,
          0
        ]
      },
      {
        "name": "Favorites",
        "data": [
          0,
          0,
          0,
          0
        ]
      }
    ]
  },
  {
    "title": "Tweets",
    "y_axis_label": "Number of Tweets",
    "x_axis_labels": [
      "12AM-06AM",
      "06AM-12PM",
      "12PM-06PM",
      "06PM-12AM"
    ],
    "series": [
      {
        "name": "Tweets",
        "data": [
          8,
          1,
          2,
          0
        ]
      }
    ]
  },
  {
    "title": "Retweets",
    "y_axis_label": "Number of Tweets",
    "x_axis_labels": [
      "12AM-06AM",
      "06AM-12PM",
      "12PM-06PM",
      "06PM-12AM"
    ],
    "series": [
      {
        "name": "Retweets",
        "data": [
          8679,
          4692,
          2105,
          0
        ]
      }
    ]
  },
  {
    "title": "Replies",
    "y_axis_label": "Number of Tweets",
    "x_axis_labels": [
      "12AM-06AM",
      "06AM-12PM",
      "12PM-06PM",
      "06PM-12AM"
    ],
    "series": [
      {
        "name": "Replies",
        "data": [
          3427,
          789,
          1391,
          0
        ]
      }
    ]
  },
  {
    "title": "Quoted Tweets",
    "y_axis_label": "Number of Tweets",
    "x_axis_labels": [
      "12AM-06AM",
      "06AM-12PM",
      "12PM-06PM",
      "06PM-12AM"
    ],
    "series": [
      {
        "name": "Quotes",
        "data": [
          284,
          66,
          73,
          0
        ]
      }
    ]
  },
  {
    "title": "Favorites",
    "y_axis_label": "Number of Tweets",
    "x_axis_labels": [
      "12AM-06AM",
      "06AM-12PM",
      "12PM-06PM",
      "06PM-12AM"
    ],
    "series": [
      {
        "name": "Favorites",
        "data": [
          0,
          0,
          0,
          0
        ]
      }
    ]
  }
]

Answer 1

Try this 尝试这个

   $.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);
  });

See thie plunker Here just call this function in websocket 看到thunker 在这里，只需在websocket中调用此函数

将Websocket JSON与HighCharts结合使用

问题描述

1 个解决方案

解决方案1
0 2015-10-07 16:24:10

将Websocket JSON与HighCharts结合使用

问题描述

1 个解决方案

解决方案1 0 2015-10-07 16:24:10

解决方案1
0 2015-10-07 16:24:10