如何在动态图表中添加动态序列

Question

我正在使用“高级图表”在我的应用程序中构建一个图表，我的数据来自数据库。我的系列名称是“年”，可以是1或更大，并且基于“年”有各自的数据。所以我正在做的是我将所有系列和数据分配给带有for循环的字符串变量。在系列部分中，我将此字符串变量指定为[seriesdata]。但是它不起作用。如果我分配相同的值在字符串变量中作为静态值到数组，它的工作正常。请指导我在哪里出错。以下是我的JavaScript函数。

function ShowChartCntRecvdMonth(cntrecvdyears) {
        $.getJSON("/Navigation/CntRecvdMonthChart", { Years: cntrecvdyears }, function (data) {
            var year = [];
            var Qty = [];
            var seriesdata = '[';
            var seriesdata1 = [{ name: '2019', data: [3883, 3961, 3893, 3780, 4021, 3765, 3560, 4099, 3310, 3403, 3628, 3137,] }, { name: '2020', data: [3489, 3883, 3403, 3331, 2605, 949,] }];

            for (var i = 0; i < data.length; i++) {
                if (year.includes(data[i].CntRecvdMonthYear)) {
                }
                else {
                    year.push(data[i].CntRecvdMonthYear);
                }
                Qty.push(data[i].CntRecvdMonthQty);
            }

            for (var j = 0; j < year.length; j++) {
                //seriesdata.push('{name: ' + year[j]);
                seriesdata += "{name: '" + year[j] + "',data:[";
                for (var k = 0; k < data.length; k++) {
                    if (year[j].includes(data[k].CntRecvdMonthYear)) {
                        //seriesdata.push(data[k].CntRecvdMonthQty);
                        seriesdata += data[k].CntRecvdMonthQty + ",";
                        if (k == data.length - 1) {
                            seriesdata += ']';
                        }
                    }
                    else {
                        if (k == data.length - 1) {
                            seriesdata += ']';
                        }
                    }
                }
                if (j == year.length - 1) {
                    seriesdata += '}';
                }
                else {
                    seriesdata += '},';
                }

            }
            seriesdata += ']';

            Highcharts.chart('cntreceivedmonth', {
                chart: {
                    type: 'area'
                },
                title: {
                    text: 'Containers Received Chart By Year / Month'
                },

                xAxis: {
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                    tickmarkPlacement: 'on',
                    title: {
                        enabled: false
                    }
                },
                yAxis: {
                    title: {
                        text: 'Qty'
                    },
                    labels: {
                        formatter: function () {
                            return this.value;
                        }
                    }
                },
                tooltip: {
                    split: true
                },
                plotOptions: {
                    area: {
                        stacking: 'normal',
                        lineColor: '#666666',
                        lineWidth: 1,
                        marker: {
                            lineWidth: 1,
                            lineColor: '#666666'
                        }
                    }
                },
                series: [seriesdata], 
//Here if i am giving seriesdata1, works perfectly but when i  am giving [seriesdata] then it does //not work
                credits: {
                    enabled: false
                },
            });
        });
    }

Answer 1

Highcharts中系列所需的格式是一个对象数组，同时，您似乎创建了一个很长的字符串。

有一个文档可以帮助您理解它：

API：https://www.highcharts.com/docs/chart-concepts/series

以及显示您的输出应如何的API链接：

API：https://api.highcharts.com/highcharts/series.line.data