如何显示包含多行的高图表

How to display a highchart with more than one line?

本文关键字：包含多高图表显示何显示更新时间：2023-09-26

我有一个列表名称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>

有人能帮我把一张四行的图表叠起来吗？

提前感谢

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

$(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]
    }]
});

})；

您应该将更多对象添加到序列数组中以创建多条线。