我想在融合图表中显示来自API的动态数据。我正在使用融合图表来显示角度图表中的值。如何将JSON数据分配给图表属性的值字段。我已经解码了数据帧并在控制台日志中获得了类似“24”的值。我需要在融合图表角图中显示。
样本数据
{"id":4753666,"timestamp":"2017-02-17","dataFrame":"TEVOOjbb==","fcnt":243,"port":2,"rssi":-113,"snr":-4.19,"sf_used":9,"decrypted":true}
码
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js?cacheBust=8232"></script>
<script src="http://fusioncharts.github.io/angular-fusioncharts/demos/js/angular-fusioncharts.min.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=8232"></script>
<script>
var app = angular.module('myApp', ["ng-fusioncharts"])
app.controller('MyController', function ($scope, $http) {
$http.get('https://example.com', {
headers: { 'Authorization': 'Basic passwordbase64==' }
})
.then(function (response) {
$scope.names = response.data;
$scope.decodedFrame = atob($scope.names.dataFrame);
$scope.decodedFrameNew = $scope.decodedFrame.substring(4);
$scope.distanceinFeet = $scope.decodedFrameNew * 11.5*2;
$scope.Value = $scope.distanceinFeet / 148;
$scope.ValueinCm = $scope.Value.toFixed(2);
console.log($scope.ValueinCm )
});
});
var myData = {
"chart": {
"caption": "Bin 1",
"lowerLimit": "0",
"upperLimit": "14",
"showValue": "1",
"valueBelowPivot": "1",
"theme": "fint"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "5",
"code": "#e44a00"
}, {
"minValue": "5",
"maxValue": "10",
"code": "#f8bd19"
}, {
"minValue": "10",
"maxValue": "14",
"code": "#6baa01"
}]
},
"dials": {
"dial": [{
"value": "34"
}]
}
};
</script>
</head>
<body ng-app="myApp">
<div ng-controller="MyController">
<fusioncharts id="chartContainer1" width="450" height="400" type="angulargauge" dataSource={{decodedFrame}}></fusioncharts>
</div>
</body>
您可以按照以下链接存储JSON：link
并链接程序：link
您可以按照以下成功执行的代码进行操作。
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js?cacheBust=8232"></script>
<script src="http://fusioncharts.github.io/angular-fusioncharts/demos/js/angular-fusioncharts.min.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=8232"></script>
<script>
var app = angular.module('myApp', ["ng-fusioncharts"])
app.controller('MyController', function($scope, $http) {
/*$http.get('https://example.com', {
headers: { 'Authorization': 'Basic passwordbase64==' }
})
.then(function (response) {
$scope.names = response.data;
$scope.decodedFrame = atob($scope.names.dataFrame);*/
//Here you can plot you response json in fusioncharts
var myChart = new FusionCharts({
type: 'angulargauge',
renderAt: 'chart-container',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Customer Satisfaction Score",
"subcaption": "Last week",
"lowerLimit": "0",
"upperLimit": "100",
"lowerLimitDisplay": "Bad",
"upperLimitDisplay": "Good",
"showValue": "1",
"valueBelowPivot": "1",
"theme": "fint"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "50",
"code": "#e44a00"
}, {
"minValue": "50",
"maxValue": "75",
"code": "#f8bd19"
}, {
"minValue": "75",
"maxValue": "100",
"code": "#6baa01"
}]
},
"dials": {
"dial": [{
"value": "67"
}]
}
}
});
// Render the chart.
myChart.render();
//});
});
// var myData = {
// "chart": {
// "caption": "Bin 1",
// "lowerLimit": "0",
// "upperLimit": "14",
// "showValue": "1",
// "valueBelowPivot": "1",
// "theme": "fint"
// },
// chart: {
// caption: "Harry's SuperMart",
// subCaption: "Top 5 stores in last month by revenue",
// },
// data:[{
// label: "Bakersfield Central",
// value: "880000"
// },
// {
// label: "Garden Groove harbour",
// value: "730000"
// },
// {
// label: "Los Angeles Topanga",
// value: "590000"
// },
// {
// label: "Compton-Rancho Dom",
// value: "520000"
// },
// {
// label: "Daly City Serramonte",
// value: "330000"
// }]
// }
// "colorRange": {
// "color": [{
// "minValue": "0",
// "maxValue": "5",
// "code": "#e44a00"
// }, {
// "minValue": "5",
// "maxValue": "10",
// "code": "#f8bd19"
// }, {
// "minValue": "10",
// "maxValue": "14",
// "code": "#6baa01"
// }]
// },
// "dials": {
// "dial": [{
// "value": "34"
// }]
// }
// };
</script>
</head>
<body ng-app="myApp">
<div ng-controller="MyController">
<div id="chart-container">FusionCharts will load here...</div>
<!-- <fusioncharts id="chartContainer1" width="450" height="400" type="angulargauge" dataSource="myData"></fusioncharts> -->
</div>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script type="text/javascript" src="https://unpkg.com/[email protected]/fusi`enter code here`oncharts.js"></script>
<script type="text/javascript" enter code heresrc="https://unpkg.com/[email protected]/fusioncharts.charts.js"></script>
<script type="text/javascript" src="https://unpkg.com/[email protected]/themes/fusioncharts.theme.fint.js"></script>
<script type="text/javascript" src="https://rawgit.com/fusioncharts/fusioncharts-jquery-plugin/feature/node-commonjs-support/package/fusioncharts-jquery-plugin.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="chart-container">FusionCharts will render here...</div>
<div id="chart-container2">FusionCharts will render here</div>
<div id="chart-container3" style="margin-left: 54%;margin-top: -56%;">FusionCharts will render here</div>
<div id="chart-container4" style="margin-left: 54%;">FusionCharts will render here``
</div>
<script type="text/javascript">
jQuery('document').ready(function () {
$("#chart-container").insertFusionCharts({
type: "column2d",
width: "500",
height: "300",
dataFormat: "json",
dataSource: {
"chart": {
"caption": "Course Admission",
"xAxisName": "Course Name",
"yAxisName": "NO Of Admission",
"numberPrefix": " ",
"theme": "fint"
},
"data": [{
"label": ""fgf",
"value": "10"
}, {
"label": "gfdfg",
"value": "10"
}]
}
});
});
jQuery('document').ready(function () {
$("#chart-container2").insertFusionCharts({
type: 'doughnut2d',
renderAt: 'chart-container2',
width: '500',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "cvbcvb",
"subCaption": "bcvb",
"numberPrefix": " ",
"paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00,#8e0000",
"bgColor": "#ffffff",
"showBorder": "0",
"use3DLighting": "0",
"showShadow": "0",
"enableSmartLabels": "0",
"startingAngle": "310",
"showLabels": "0",
"showPercentValues": "1",
"showLegend": "1",
"legendShadow": "0",
"legendBorderAlpha": "0",
"defaultCenterLabel": "Total cbvc: 500",
"centerLabel": "Revenue from $label: $value",
"centerLabelBold": "1",
"showTooltip": "0",
"decimals": "0",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0"
},
"data": [
{
"label": "cvbcv",
"value": "55"
},
{
"label": "cvbc",
"value": "22"
}
]
}
});
});
jQuery('document').ready(function () {
$("#chart-container3").insertFusionCharts({
type: 'area2d',
renderAt: 'chart-container3',
width: '500',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "fghfghProcess",
"subCaption": "week",
"xAxisName": "Day",
"yAxisName": " ",
"numberPrefix": " ",
"paletteColors": "#0075c2",
"bgColor": "#ffffff",
"showBorder": "0",
"showCanvasBorder": "0",
"plotBorderAlpha": "10",
"usePlotGradientColor": "0",
"plotFillAlpha": "50",
"showXAxisLine": "1",
"axisLineAlpha": "25",
"divLineAlpha": "10",
"showValues": "1",
"showAlternateHGridColor": "0",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5"
},
"data": [
{
"label": "Mon",
"value": "41"
},
{
"label": "Tue",
"value": "46"
},
{
"label": "Wed",
"value": "55"
},
{
"label": "Thu",
"value": "4"
},
{
"label": "Fri",
"value": "5"
},
{
"label": "Sat",
"value": "58"
},
{
"label": "Sun",
"value": "6"
}
]
}
})
});
/* jQuery('document').ready(function () {
$("#chart-container4").insertFusionCharts({
*/
jQuery('document').ready(function () {
$("#chart-container4").insertFusionCharts({
type: 'bar2d',
renderAt: 'chart-container4',
width: '500',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "gfhfgResults",
"subCaption": "2017",
"yAxisName": "Status",
"paletteColors": "#0075c2",
"bgColor": "#ffffff",
"showBorder": "0",
"showCanvasBorder": "0",
"usePlotGradientColor": "0",
"plotBorderAlpha": "10",
"placeValuesInside": "1",
"valueFontColor": "#ffffff",
"showAxisLines": "1",
"axisLineAlpha": "25",
"divLineAlpha": "10",
"alignCaptionWithCanvas": "0",
"showAlternateVGridColor": "0",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5"
},
"data": [
{
"label": "gf1",
"value": "88"
},
{
"label": "gfhf 2",
"value": "73"
},
{
"label": "gfhf 3",
"value": "5"
},
{
"label": "gfhh 4",
"value": "52"
},
{
"label": "gfh5",
"value": "33"
}
]
}
})
.render();
});
</script>
</body>
</html>