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

Posted 2023-05-08

【中文标题】如何在 chart.js 中使用 JSON 数据？

【英文标题】：how to use JSON Data in chart.js?

【发布时间】：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://***.com/questions/24682843/can-i-move-array-from-php-to-javascript-retrive-from-mysql-database/24683197#24683197 这是同样的问题。

是的，我想使用 json 数据.. 提取 present_worth 并将其保存在新数组中并使用该数组代替数据：[....]

【参考方案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