[英]How to display data from server in pie chart?
I want to display data in pie chart. 我想在饼图中显示数据。 Data is retrieved from server in
JSON
format ie single int
value and I want to display it using pie chart. 从服务器以
JSON
格式(即单个int
值)检索数据,我想使用饼图显示它。 Suppose that data is 66
, then i want to show that 66%
full in pie chart. 假设数据为
66
,那么我想在饼图中显示66%
已满。
I have retrieved data but not able to find the function in javascript to accept data 我已经检索了数据,但是无法在javascript中找到函数来接受数据
For Ex. 对于前 :
:
$(function(){
$("#doughnutChart").drawDoughnutChart([
{ title: "Full", value: 66, color: "#FC4349" },
{ title: "Empty", value: 34, color: "#6DBCDB" },
]);
});`
Then instead of already defined values in above function i want to accept value from server and display in pie chart. 然后,而不是上面的函数中已经定义的值,我想从服务器接受值并显示在饼图中。
in index.html I added statement 在index.html中,我添加了语句
<script> $(document).ready(function(){ $("button").click(function(){ $.getJSON('http://api.thingspeak.com/channels/79448/feed/last.json?callback=?', function(data){ $("div").append(data.field1 + " "); }); **var x=data.field1;** }); }); </script>
This is my index.js file : 这是我的index.js文件:
$("#doughnutChart").drawDoughnutChart( dataFromServer);
`$(function(){
`$("#doughnutChart").drawDoughnutChart([
{ title:"Full" value: dataFromServer.y1, color: "#FC4349" },
{ title: "Empty" value: dataFromServer.y2, color: "#6DBCDB" },
]);
});`
`var formattedData = [];`
// "dataFromServer" contains an array of differently-formatted objects //“ dataFromServer”包含一组格式不同的对象
for ( var i = 0; i < dataFromServer.length; i++ ){ formattedData.push({ value: dataFromServer[i].y, }); } $("#doughnutChart").drawDoughnutChart( formattedData );
So please tell me is this way i should write in index.js file??? 所以,请告诉我,这样我应该在index.js文件中编写??? dataFromServer.y1=x;
dataFromServer.y1 = x; Please suggest me the correct way.
请给我建议正确的方法。
This depends upon the form of your data. 这取决于您的数据形式。 A;;
一种;; you're going to do is use variables instead of literals.
您要做的是使用变量而不是文字。 For instance, if your data is an array of objects with a title, value, and color, you could just call:
例如,如果您的数据是带有标题,值和颜色的对象数组,则可以调用:
// "dataFromServer" is an array of appropriately formatted objects
$("#doughnutChart").drawDoughnutChart( dataFromServer);
If, on the other hand, you have a complex object you need to map out, you could do it explicitly like so: 另一方面,如果您有一个复杂的对象需要映射,则可以像这样显式地进行操作:
// "dataFromServer" contains all of the right data, but in different locations
$("#doughnutChart").drawDoughnutChart([
{ title: dataFromServer.x1, value: dataFromServer.y1, color: dataFromServer.z1 },
{ title: dataFromServer.x2, value: dataFromServer.y2, color: dataFromServer.z2 },
]);
Most likely you will have an array of differently formatted object, which you will want to turn into an array of objects formatted in this manner, in which case you would want to loop through the objects from the server and create a new variable from them: 很可能您将拥有一个格式不同的对象数组,您希望将其转换为以这种方式格式化的对象数组,在这种情况下,您将希望遍历服务器中的对象并从中创建一个新变量:
// formattedData is the array that will be passed into the chart
var formattedData = [];
// "dataFromServer" contains an array of differently-formatted objects
for ( var i = 0; i < dataFromServer.length; i++ ){
formattedData.push({ title: dataFromServer[i].x,
value: dataFromServer[i].y,
color: dataFromServer[i].z });
}
$("#doughnutChart").drawDoughnutChart( formattedData );
Addendum: 附录:
Upon comment clarification, I am adding the following. 在澄清评论后,我添加以下内容。 Assuming the Title and Color values are static (ie not coming from the database), you may simply insert the integer "values" into the code directly, like so:
假设Title和Color值是静态的(即不是来自数据库),则可以直接将整数“ values”直接插入代码中,如下所示:
// "mySanFranciscoDataValue" is the single integer you're trying to insert
// into the chart. Simply reference it directly, whether it's a
// variable or a function. Presumably you will have two of them,
// one for each city, so I've included a "myNewYorkDataValue" too.
$("#doughnutChart").drawDoughnutChart([
{ title: "San Francisco", value: mySanFranciscoDataValue, color: "#FC4349" },
{ title: "New York", value: myNewYorkDataValue, color: "#6DBCDB" },
]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.