如何使用 getJSON 将 json 编码结果设置为 highchart 系列数据答案

【问题标题】：How can i set the json encode result to the highchart series data using getJSON如何使用 getJSON 将 json 编码结果设置为 highchart 系列数据
【发布时间】：2019-05-03 15:00:49
【问题描述】：

我目前是这个图表的新手，我只是想知道如何在使用 $.getJSON 时将 json 编码结果设置为 highchart 系列数据

我的 json 编码目前有这个结果。

result on json encode

所以现在当我查看我的图表时，它显示没有推送到 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);



?>

【问题讨论】：

标签： json ajax highcharts

【解决方案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 请求后渲染图表Documentation

【讨论】：