如何在饼图中显示服务器中的数据？

I want to display data in pie chart. Data is retrieved from server in JSON format i.e. single int value and I want to display it using pie chart. Suppose that data is 66, then i want to show that 66% full in pie chart.

我想在饼图中显示数据。以JSON格式从服务器检索数据,即单个int值,我想使用饼图显示它。假设数据为66,那么我想在饼图中显示66%的数据。

I have retrieved data but not able to find the function in javascript to accept data

我已检索数据但无法在javascript中找到接受数据的函数

For Ex. :

对于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
<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>

在index.html中我添加了语句

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 );

for(var i = 0; i ;>

So please tell me is this way i should write in index.js file??? dataFromServer.y1=x; Please suggest me the correct way.

所以请告诉我这是我应该写在index.js文件中的方式??? dataFromServer.y1 = X;请建议我正确的方法。

1 个解决方案

#1

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 (i.e. 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" },
]);

#1