如何将数据从我的Ajax推送到系列折线图导致Highchart

时间:2019-05-17 08:41:43

标签: jquery arrays json ajax highcharts

在我制作Piechart并成功使用此方法之前,在将我的Ajax结果中的数据显示到Highchart时出现问题,但是现在我使用Linechart,并且数据不会出现。请帮助我..

这是我的ajax和highchart,线图显示ajax是否成功

function chartProduct(dateAwalAja, dateNewEnd, area, booth, acam){
    var chartSeriesDataTire = [];
    var chartSeriesDataLubes = [];
    var chartSeriesDataBattery = [];

    $.ajax({
        type: "POST",
        url: "dashboard/productTransactionSalesActivity",
        data: {
            dateAwalAja : dateAwalAja,
            dateNewEnd : dateNewEnd,
            area : area, 
            booth : booth, 
            acam : acam
        },
        dataType: "JSON",
        success: function (response) {
            $.each(response, function (item, i) {
                $.each(i.CountGroupTire, function (item, resultTire) {
                    var series_name = resultTire.product_type_name;
                    var series_data = resultTire.totalproduct;
                    var series = [
                    series_name,
                    parseFloat(series_data)
                    ];
                    chartSeriesDataTire.push(series);
                });

                $.each(i.CountGroupLubes, function (item, resultLubes) {
                    var series_name = resultLubes.product_type_name;
                    var series_data = resultLubes.totalproduct;
                    var liter = resultLubes.liter;
                    var series_liter = parseFloat(liter).toFixed(0);
                    var series = [
                    series_name,
                    parseFloat(series_data),
                    series_liter,
                    ];
                    chartSeriesDataLubes.push(series);
                });

                $.each(i.CountGroupBattery, function (item, resultBattery) {
                    var series_name = resultBattery.product_type_name;
                    var series_data = resultBattery.totalproduct;
                    var series = [
                    series_name,
                    parseFloat(series_data)
                    ];
                    chartSeriesDataBattery.push(series);
                });

            });
        }
    });

这是我在高图中的折线图

var chartLubes = Highcharts.chart('grafikSkulubes', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Grafik SKU Product Lubes'
    },
    credits: {
        enabled: false
    },
    subtitle:false,
    xAxis: {
        categories: [
        'Lubes',
        ],
        crosshair: true
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Trx'
        }
    },
    tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
        '<td style="padding:0"><b>{point.y} Trx</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: [{
        name: 'Total',
        data: chartSeriesDataLubes,
    }]
});

我使用chartSeriesDataLubes将数据推送到系列折线图中

这是我的ajax响应

CountGroupLubes: [{totalproduct: "516", liter: "412.800000000003", id_product_type: "1",…},…]
0: {totalproduct: "516", liter: "412.800000000003", id_product_type: "1", 
product_type_name: "AX3"}
1: {totalproduct: "1705", liter: "1363.99999999997", id_product_type: "2",
product_type_name: "AX4"}
2: {totalproduct: "2268", liter: "1814.39999999997", id_product_type: "3",product_type_name: "AX5"}
3: {totalproduct: "1940", liter: "1551.99999999997", id_product_type: "4",product_type_name: "AX6"}
4: {totalproduct: "1866", liter: "1866", id_product_type: "5", product_type_name: "AX7 (10w40)"}
5: {totalproduct: "4538", liter: "3630.40000000004", id_product_type: "6",product_type_name: "AX8"}

0 个答案:

没有答案