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

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

我目前在json编码中有此结果。

    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);



?>

因此，现在当我查看图表时，它不会显示推送到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);



?>

我将向你们展示我前端的图表功能。

    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);



?>

在我的后端，我有这个代码。

    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);



?>

---

在收到数据之前，您正在渲染图表，请尝试以下操作：

$.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请求后呈现图表