0
因此，我正在嘗試基於Web套接字中返回的JSON對象構建餅圖。一旦返回，如果選擇了「餅圖」選項，則會顯示另一個選擇下拉菜單以允許用戶選擇時間。然後將根據時間段顯示餅圖。但是，我無法將此選項顯示在控制檯中。我無法弄清楚如何解析JSON以獲取用戶選擇的特定時間。我相信問題在於JSON對象的構造方式。根據下拉更改HighChart餅圖
這是它目前的樣子：
的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
]
}
]
}
]
我不會重寫所有東西只是爲了使用此圖表庫。 – user2402107