如何使用 highcharts.js 创建图表并调用 ajax？答案

【问题标题】：how create chart with highcharts.js and call ajax?如何使用 highcharts.js 创建图表并调用 ajax？
【发布时间】：2020-08-20 14:29:34
【问题描述】：

我用 php 连接到 postgres 数据库，并创建了这个脚本，它可以正确提取所需数据并将它们转换为 Json 格式：

<?php

   include('connect.php');

    $query = 'SELECT "Name","Vulnerabilità_Violate" ...';


$result = pg_query($query) or die('Error message: ' . pg_last_error());


while ($row = pg_fetch_assoc($result)) {
    $records[]=$row;
}

foreach( $records as $record )      
    $json[] = array($record['Name'], intval($record['Vulnerabilità_Violate']));



echo json_encode($json);

?>

为了制作图表，我写了这段代码：

$(document).ready(function() {   
var options = {     
chart: {renderTo:'conteiner',type:'spline'},     
series: [{}] // Lascio vuoto   
};   

$.getJSON('file.php', function(data){    
options.series[0].data = data;     
var chart = new Highcharts.Chart(options); 
});
});

但是，当我打开 html 页面时，我看不到任何图形。

我该怎么办？

【问题讨论】：

您能否分享一个示例，您的data 格式是什么样的？
这是我的数据示例：[["SSL Certificate Signed Using Weak Hashing Algorithm",4500],["SSL Self-Signed Certificate",2000], [... ]]
我复制了你的代码，看起来一切正常：jsfiddle.net/BlackLabel/zr84aov0
mmh...我像你一样尝试使用静态数据，但它对我不起作用
我尝试了一些静态数据，直接在 html 正文中编写代码，它可以工作。而如果我把脚本放在头上没有。我认为这是一个 dom 加载问题，我该如何解决？

标签： javascript php json charts highcharts

【解决方案1】：

您的变量 data 中有哪些类型的数据，然后您将其分配给系列？能给我们举个例子吗？

您是否尝试过在您的系列中静态设置一些随机值？这显示图表吗？

var values= [11,9,9,8,7,7,5,4,4,2];

您可以尝试用这种方式创建图表吗？

$('#conteiner').highcharts({
    series: [{
        data: data
    }]
});

您的 div 名称正确吗？还是容器而不是容器？

另外，当您设置数据时，使用数组可能会更好，这样做的一个好方法是：

var values = new Array();
for (var 1= 0; i < string.data.length; i++)
{
values.push([string.data[i].value]);
}

使用 push([]) 将其分配给 Highcharts 中的数据类型非常重要。

露西亚

【讨论】：

我尝试了一些静态数据，直接在 html 正文中编写代码，它可以工作。而如果我把脚本放在头上没有。我认为这是一个 dom 加载问题，我该如何解决？