如何使用GetJson将JSON编码结果设置为HighChart系列数据

Question

我当前是此图表的新手，我只是想知道如何在使用$ .getjson

时将JSON Encode结果设置为HighChart系列数据

我当前在我的JSON Encode上有此结果。

在JSON编码上结果

因此，现在当我查看图表时，它没有显示到HighChart的数据的值。

HighChart

我会向大家展示我的图表功能。

    var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'line',
        options3d: {
            enabled: true,
            alpha: 15,
            beta: 15,
            depth: 50,
            viewDistance: 25
        }
    },
    title: {
            text: 'Frequently damaged Asset Item (PTAF)'
    },
    subtitle: {
        thext: 'Asset management report'
    },
    plotOptions: {
        column: {
            depth: 25
        }
    },
    series:[{
        data:[]
    }]
});

$.getJSON('ajax/ams_report_chart.php', function(data){
    json_data = chart.series.data = data;
    console.log(json_data);
});
function showValues() {
    $('#alpha-value').html(chart.options.chart.options3d.alpha);
    $('#beta-value').html(chart.options.chart.options3d.beta);
    $('#depth-value').html(chart.options.chart.options3d.depth);
}
// Activate the sliders
$('#sliders input').on('input change', function () {
    chart.options.chart.options3d[this.id] = parseFloat(this.value);
    showValues();
    chart.redraw(false);
});
showValues();

});

，在我的后端我有此代码。

    <?php 
include_once('../core/initialize.php');
$db = Db::getInstance();
if(!isset($_SESSION['user_id'])){
    error::getInstance();
    return false;
}
$sql = $db->queryNoFilter("SELECT mr_no,store,rh.classification,COUNT(*) as total
FROM asset_mgt.repair_history as rh
LEFT JOIN ( SELECT type_of_asset FROM asset_mgt.classification) classif 
ON rh.classification = classif.type_of_asset
WHERE store = 1130 GROUP BY rh.classification");
$json = [];
foreach ($sql->results() as $res) {
    // $json[] = array($res->classification,(int)$res->total);
    $json[] = [$res->classification,(int)$res->total];
}
echo json_encode($json, JSON_NUMERIC_CHECK);

?>

Answer 1

您在接收数据之前呈现图表尝试以下内容：

$.getJSON('ajax/ams_report_chart.php', function(data){
  var chart = new Highcharts.Chart({
    chart: {
      renderTo: 'container',
      type: 'line',
      options3d: {
        enabled: true,
        alpha: 15,
        beta: 15,
        depth: 50,
        viewDistance: 25
      }
    },
    title: {
      text: 'Frequently damaged Asset Item (PTAF)'
    },
    subtitle: {
      thext: 'Asset management report'
    },
    plotOptions: {
      column: {
        depth: 25
      }
    },
    series:[{
      data:data
    }]
  });
});

如果您需要配置多个图表，也可以将所有选项设置为分开，然后在AJAX请求文档之后渲染图表