jquery - 如何使用具有更多列的数据使用 jquery 创建图表

Question

我有以下数据。如何使用它创建条形图和饼图？

Fiscal Year    Total Budget   Average Budget    Number of States Reporting   Average Budget % Change

 2001-2002      $81,337,970    $77,365,083                $8                         11.00%

 2002-2003      $78,329,957    $59,330,670                $93                         7.00%

我是 jQuery 新手，我需要在 jQuery 中完成此操作。

Answer 1

http://www.1stwebdesigner.com/css/top-jquery-chart-libraries-interactive-charts/

您通常必须将 json 数据提供到这些图表中：

JSON（JavaScript 对象通知）是对值键的哈希。

例如：

var data = [

    { 
         "period" : "2001-2002", 
         "totalBudget" : 81337970,
         "avgBudget" : 77365083,
         "numberStates" : 8,
         "avgBudgetChange" :  11.00 
    },
    {
         "period" : "2002-2003", 
         "totalBudget" : 78329957,
         "avgBudget" : 58330670,
         "numberStates" : 93,
         "avgBudgetChange" :  7.00
    }


 ]

访问特定数据：data[0].period //will output "2001-2002"

如果您必须从服务器端获取这些数据：

以 PHP 为例，您首先要使用函数json_encode(data); // will encode an array into json http://php.net/manual/en/function.json-encode.php将数组编码为 json

然后做一个 XMLHttpRequest ：http://api.jquery.com/jQuery.post/，http://api.jquery.com/jQuery.get/，http://api.jquery.com/jQuery.ajax/

然后制作图表，根据您使用的图表库添加一些选项。

希望能帮助到你。