如何显示多条线的高图？答案

【问题标题】：How to display a highchart with more than one line?如何显示多条线的高图？
【发布时间】：2015-09-08 18:27:53
【问题描述】：

我的列表名称为 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>

谁能帮我显示一个四线图表？

提前致谢

【问题讨论】：

您需要创建四个独立的系列。现在你只有一个。请参阅多行示例here。现在比较演示和代码中的series 选项——这就是问题所在。您只有一个系列，而您需要生成其中四个。

标签： javascript c# highcharts asp.net-mvc-5

【解决方案1】：

这里可以看到series是一个对象数组

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

});

您应该将更多对象添加到系列数组中以创建多行。

【讨论】：