Question

所以我试图根据Web套接字中返回的JSON对象构建一个饼图。如果选择了＆＃34;饼图＆＃34;如果已选择，则会显示另一个选择下拉菜单，以允许用户选择时间。然后将根据时间段显示饼图但是我无法在控制台中显示此选项。我无法弄清楚如何解析JSON以获得用户选择的特定时间。我认为问题在于构造JSON对象的方式。

目前的情况如下：

的index.html

<!DOCTYPE html>
<html>
<head>
    <title>AngularJS + Highcarts </title>
    <link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
    <link href='css/highChartCss.css' rel='stylesheet' type='text/css'>
</head>
<body>
<select id="chartType">
    <option value="line">Line</option>
    <option value="column">Column</option>
    <option value="area">Area</option>
    <option value="areaspline">Area Spline</option>
    <option value="pie">Pie(Test)</option>
</select>
    <select id="subOption"  hidden>
        <option value="blank"></option>
        <option value="12AM-06AM">12AM-06AM</option>
        <option value="06AM-12PM">06AM-12PM</option>
        <option value="12PM-06PM">12PM-06PM</option>
        <option value="06PM-12AM">06PM-12AM</option>
    </select>
<div id="content">
</div>
<div id="graph">
    <section ng-app='charts'>
        <div ng-controller="Ctrl">
            <highchart chart='CDHLeads'></highchart>
        </div>
    </section>
</div>

<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/highChartAngular.js"></script>
</body>
</html>

的script.js

function log() {
    var time = new Date();
    var formattedTime = time.toLocaleTimeString();
    var date = new Date();
    var formattedDate = date.toLocaleDateString();
    document.getElementById("content").innerHTML = formattedDate + " " + formattedTime;
};
Highcharts.setOptions({
    colors: ['#0266C8', '#0EE', '#F93', '#DDDF00', '#F90101']
});

function buildChart(title, yAxisLabel, xAxisLabels, series) {
    $(function () {
        $('#container').highcharts({
            credits: {
                enabled: false
            },
            chart: {
                type: '',
                backgroundColor: '#000000'
            },
            legend: {
                itemStyle: {
                    fontSize: '12px',
                    font: '12pt Inconsolata, sans-serif',
                    color: '#FFF'
                }
            },
            title: {
                text: title,
                style: {
                    font: '12pt Inconsolata, sans-serif',
                    color: 'white'
                }
            },
            xAxis: {
                categories: xAxisLabels,
                style: {
                    font: '12pt Inconsolata, sans-serif',
                    color: 'white'
                }
            },
            plotOptions: {

                series: {
                    colorByPoint: false
                }
            },
            yAxis: {
                title: {
                    text: yAxisLabel
                },
                tyle: {
                    font: '12pt Inconsolata, sans-serif',
                    color: 'white'
                }
            },
            series: series
        });
        console.log(series);
    });
    $("#chartType").change(function () {
        var type = this.value;
        if (type !== "pie") {
            var cdh = $('#container').highcharts();
            document.getElementById("subOption").hidden = true;
            $(cdh.series).each(function () {
                this.update({
                    type: type,
                }, false);
            });
            cdh.redraw();
        }
        else{
            console.log("hello");
            var cdh = $('#container').highcharts();
            var time = this.value;
            console.log(time);
            document.getElementById("subOption").hidden = false;
            $(cdh.series).each(function () {
                this.update({
                    type: type
                }, false);
            });
            cdh.redraw();
        }

    });
}

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 = buildChart();
}

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

您可以使用Angular Charts来处理此类情况。

根据下拉菜单更改HighChart Pie

1 个答案: