将 Websocket JSON 与 HighCharts 一起使用答案

【问题标题】：Using Websocket JSON with HighCharts将 Websocket JSON 与 HighCharts 一起使用
【发布时间】：2015-10-07 15:33:00
【问题描述】：

所以我有一个 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();
    }

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

<!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>

返回的 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
        ]
      }
    ]
  }
]

【问题讨论】：

标签： javascript jquery json angularjs highcharts

【解决方案1】：

试试这个

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

见thie plunker Here 只需在websocket 中调用此函数

【讨论】：

你从哪里得到这个 results.json？
我把你的数据放在results.json中
所以我要做的是捕获您在上面看到的通过我编写的 websocket.js 传递的 json。将其存储到一个变量中，然后将其加载到 HighCharts 中
websocket.onmessage = function (event) { console.log(event.data); var jsondata = event.data }
把你从 webscket 接收数据的地方放在上面的代码中