Javascript 如何显示包含多行的highchart？

我有一个名单名称aaa。这是一份清单

aaa[0] = [[{'a',1},{'b',2}]

aaa[1] = [[{'q',2},{'bd',0}]

aaa[2] = [[{'sa',3},{'bs',6}]

aaa[2] = [[{'sa',5},{'vb',8}]

我得到了模特的回应

现在我需要将这个值填充到图表中 我的图表将包含四行，分别是

aaa[0]

，

aaa[1]

，

aaa[2]

，

aaa[3]

这是我的高图表代码

<script>
    $(document).ready(function () {

        //Default time zone
        moment.tz.setDefault("America/New_York");

        // Global option to disable UTC time usage
        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });

        // Chart configurations
        var options = {
            chart: {
                renderTo: 'container2',
                type: 'area',
                marginRight: 45,
                zoomType: 'x'
            },
            title: {
                text: 'aaaa'
            },
            xAxis: {

                type: 'datetime',
                minRange: 8 * 24 * 3600000,
                labels: {
                    format: '{value:%m-%d-%Y}',
                    rotation: 45

                }


            },
            yAxis: {
                title: {
                    text: 'count'
                },
                labels: {
                    formatter: function () {
                        return this.value;
                    }
                }
            },

            plotOptions: {
                area: {
                    marker: {
                        enabled: true,
                        symbol: 'circle',
                        radius: 2,
                        states: {
                            hover: {
                                enabled: true
                            }
                        }
                    },
                    lineWidth: 1,
                    threshold: null
                }
            },
            series: [{
                fillOpacity: 0.1,
                name: 'aaa',
                pointInterval: 24 * 3600 * 1000,
                pointStart: 1375295400000,
                data: GetPercentage()

            }]
        };

        // Rendering the Highcharts
        chart = new Highcharts.Chart(options);


         function GetPercentage() {

            var data = @Html.Raw(JsonConvert.SerializeObject(Model.aaa));

            //  alert(data)

            @foreach(var val in Model.aaa) //loop of getting a list from aaa
            {

                     var percentages = [];


                for (var x = 0; x < @val.Count; x++)
                {                                 
                     //Here I need to push the list 

                }
                //percentages.sort(SortByDate);
                // return percentages;
            }
        }

        //Sort the array based on first array element
        function SortByDate(a,b){
            //alert(a[0] +" - " +b[0]);
            return (a[0] - b[0]);
        }


        //Timeout function to reload page on everyone hour
        setTimeout(function () {
            location.reload(true);
        }, 60* 60 * 1000);

        //Progress bar to display feed delivery percentage
        $('.progress .progress-bar').progressbar({
            transition_delay: 500,
            display_text: 'fill',
            refresh_speed: 500
        });
    });
</script>

$（文档）.ready（函数（）{
//默认时区
moment.tz.setDefault（“美国/纽约”）；
//禁用UTC时间使用的全局选项
Highcharts.setOptions({
全球：{
useUTC:false
}
});
//图表配置
变量选项={
图表：{
renderTo:'container2'，
类型：'区域'，
marginRight:45，
zoomType:'x'
},
标题：{
文字：“aaaa”
},
xAxis：{
键入：“日期时间”，
最小范围：8*24*3600000，
标签：{
格式：“{值：%m-%d-%Y}”，
轮换：45
}
},
亚克斯：{
标题：{
文本：“计数”
},
标签：{
格式化程序：函数（）{
返回此.value；
}
}
},
打印选项：{
面积：{
标记：{
启用：对，
符号：'圆'，
半径：2，
国家：{
悬停：{
已启用：true
}
}
},
线宽：1，
阈值：空
}
},
系列：[{
填充不透明度：0.1，
名称：“aaa”，
点间距：24*3600*1000，
起点：1375295400000，
数据：GetPercentage（）
}]
};
//绘制海图
图表=新的高点图表。图表（选项）；
函数GetPercentage（）{
var data=@Html.Raw（JsonConvert.SerializeObject（Model.aaa））；
//警报（数据）
@foreach（Model.aaa中的var val）//从aaa获取列表的循环
{
风险值百分比=[]；
对于（var x=0；x<@val.Count；x++）
{                                 
//在这里，我需要推列表
}
//百分比。排序（SortByDate）；
//回报率；
}
}
//根据第一个数组元素对数组进行排序
功能SortByDate（a，b）{
//警报（a[0]+“-”+b[0]）；
返回（a[0]-b[0]）；
}
//超时功能可在每个小时内重新加载页面
setTimeout（函数（）{
位置。重新加载（true）；
}, 60* 60 * 1000);
//显示饲料交付百分比的进度条
$（'.progress.progressbar'）.progressbar({
过渡延迟：500，
显示“填充”文本，
刷新速度：500
});
});

有人能帮我画一张有四条线的图表吗

---

提前感谢

在这里您可以看到该系列是一个对象数组

$(function () { 
$('#container').highcharts({
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Fruit Consumption'
    },
    xAxis: {
        categories: ['Apples', 'Bananas', 'Oranges']
    },
    yAxis: {
        title: {
            text: 'Fruit eaten'
        }
    },
    series: [{
        name: 'Jane',
        data: [1, 0, 4]
    }, {
        name: 'John',
        data: [5, 7, 3]
    }]
});

}))

---

您应该向序列数组中添加更多对象以创建多行。

您需要创建四个单独的序列。现在你只有一个。请参见具有多行的示例。现在比较演示和代码中的

系列

选项-这就是问题所在。您只有一个系列，而您需要生成四个系列。