如何在 chart.js 中使用 JSON 数据？答案

【问题标题】：how to use JSON Data in chart.js?如何在 chart.js 中使用 JSON 数据？
【发布时间】：2014-09-01 23:54:46
【问题描述】：

您好，我一直在尝试使用 MYSQL 数据库中的数据并使用它们创建带有 chart.js 的图形图表。我将数据编码为 JSON 数据（通过 php 文件名 data1.php），现在我需要使用 Jquery 或 javascript 将这些 Json 数据转换回数组。我对 AJAX 了解不多。所以你能帮帮我吗？ ?

data1.php 生成 JSON 数据

[{"company_name":"project A","present_worth":"81531.946062978"},{"company_name":"project B","present_worth":"67313.916593765"},{"company_name":"project c","present_worth":"92440.723376746"}]

我需要一个数组中的present_worth值

这是用于创建条形图的脚本.. 而不是自定义数据（例如数据：[65,59,90,81,56,55,40]）在这里我想要一个带有 JSON 数据的数组。

<script type="text/javascript">

        function bar(){

        var barChartData = {
            labels :["January","February","March","April","May","June","July"],datasets : [
                {
                    fillColor : "rgba(220,280,220,0.5)",
                    strokeColor : "rgba(220,220,220,1)",
                    data : [65,59,90,81,56,55,40]

                },
                {
                    fillColor : "rgba(151,187,205,0.5)",
                    strokeColor : "rgba(151,187,205,1)",
                    data : [28,48,40,19,96,27,100]
                }
            ]
        };
    var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(barChartData);
}
</script>

【问题讨论】：

所以你想遍历 JSON/Array 并且数据 (Chart.js) 应该是 present_worth?
看看这里：http://stackoverflow.com/questions/24682843/can-i-move-array-from-php-to-javascript-retrive-from-mysql-database/24683197#24683197 这是同样的问题。
是的，我想使用 json 数据.. 提取 present_worth 并将其保存在新数组中并使用该数组代替数据：[....]

标签： javascript php jquery mysql json

【解决方案1】：

我不太确定你是不是这个意思：

var chartjsData = [];
for (var i = 0; i < json.length; i++) {
    chartjsData.push(json[i].present_worth);  
}

http://jsfiddle.net/rnX2Z/1/

否则评论;)

【讨论】：

【解决方案2】：

所以这是一个 JSON 数据示例，

var data = '{"name":"tom","Second":"smith","age":"20","height":"180"}'

创建一个变量来解析数据

var obj9 = JSON.parse(data);

然后创建另一个变量来存储您的特定数据。（.age，这是相对于您的数据集，例如.name，.height）

var cat = obj9.age;

然后您可以在图形数据中使用变量 cat。

data : [cat9,randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]

希望对您有所帮助。

了解有关 JSON 的更多信息 http://www.w3schools.com/json/default.asp

【讨论】：