如何传递一个简单的JSON数组到jQuery然后Flot？ [英] How do I pass a simple JSON array to jQuery then Flot?

问题描述

我一直在Googling试图找到解决问题的方法，但是我发现接近的一切都太复杂了。

I've been Googling for a while trying to find a solution to my problem, but everything I've found which comes close is too complicated!

我有一个工作的Flot饼图。它以这种格式从Django接收一个JSON数组：

I have a working Flot pie chart. It receives a JSON array from Django in this format:

[0，3，5，6，7]

数组表示每个系列的实例数（即系列1的0个实例，系列2的3个实例等）。

The array represents the number of instances of each series (i.e. 0 instances of Series 1, 3 instances of Series 2 etc etc).

然后使用该代码（ theData 是上面的数组），在一个简单的Flot饼图中显示该数组：

That array is then shown in a simple Flot Pie Chart using this code (theData is the array above):

function loadTotalChart(theData) {
  $.plot($("#total-pie-chart"), theData ,
  {
    series: {
        pie: { 
            show: true
    }
        },
label: {
    show:true
},
legend: {
    show: false
    },
grid: {
    hoverable: true,
    }
   });
  }

问题是标签在数组中未定义，所以我的饼图显示每个系列的未定义：30％或类似。

The problem is that the labels are undefined in the array, so my pie chart shows "Undefined: 30%" or similar for each series.

我想要做的是为每个系列添加标签：标签对于图表的每个实例都是相同的。

What I'm trying to do is add labels for each series: the labels are the same for every instance of the chart.

如何获取JSON数组，添加标签然后传递给Flot？

How can I take the JSON array, add labels and then pass that to Flot??

非常感谢！

编辑：

感谢利亚姆McCann ，我现在有这个代码只有在有数据时绘制图表：

Thanks to Liam McCann, I now have this code to plot the chart only if there is data:

function checkJsons(otherJson,newJson)
{
for (var key in otherJson) {if(otherJson[key] != newJson[key]) {return false;}}
return true;
}

function loadWeekChart(theData)
{
var blankData = [0, 0, 0, 0, 0];
if(checkJsons(blankData,theData)){$('#week-pie-chart').empty().append('Nothing to show yet');} 

else { $.plot($("#week-pie-chart"), theData ,
    {
        series: {
            pie: { 
                show: true
            }
        }
    }); }
 } 

推荐答案

我自己的问题以下是我现在使用的代码来取代未标记的JSON数组（例如 [1，2，4，1，5] ），确保数组包含数据即不是 [0，0，0，0，0] ），添加标签，然后显示图表：

Turns out I have answered my own question. Here is the code I'm now using to take an unlabelled JSON array (e.g. [1, 2, 4, 1, 5]), make sure the array contains data (i.e. is not [0, 0, 0, 0, 0]), add labels and then show the chart:

function loadTotalChart(theData) {
  var blankData = [0, 0, 0, 0, 0];
  if(checkJsons(blankData,theData)){
  $('#total-pie-chart').empty().append('Nothing to show yet');
} else { 
  var totalPieData = [
    {label: "1/5", data:theData[0]},
    {label: "2/5", data:theData[1]},
    {label: "3/5", data:theData[2]},
    {label: "4/5", data:theData[3]},
    {label: "5/5", data:theData[4]},
  ];
  $.plot($("#total-pie-chart"), totalPieData ,
    {
        series: {
            pie: { 
                 show: true
            }
        },
        label: {
               show:true
        },
        legend: {
                show: false
        },
        grid: {
              hoverable: true,
        }
    }); 
  }
} 

如果有人可以看到代码的任何问题，一个更好的方法，请让我知道！

If anyone can see any issues with the code, or a better way of doing it, please let me know!

编辑：回顾这个问题，我意识到我没有包括这个引用的checkJsons函数功能。这里是：

Looking back at this question, I realise I didn't include the checkJsons function which is referenced in this function. Here it is:

function checkJsons(otherJson,newJson){
    for (var key in otherJson) {if(otherJson[key] != newJson[key]) {return false;}}
    return true;
 }

这篇关于如何传递一个简单的JSON数组到jQuery然后Flot？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！