如何显示多行的高图?

时间:2015-06-23 05:34:34

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

我有一个名单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}]

我从模型中得到了回应

现在我需要将此值填充到Chart中 我的图表将包含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>

有人可以帮我用四行显示图表吗?

提前致谢

1 个答案:

答案 0 :(得分:2)

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

#game-content
{
    margin-top:50px;
    overflow:auto;
    height:someheight  px;
    width:100%;
}

#game-wrapper
{
    float:left;
    margin-left:90px;
    position:relative;
    height:100%;
}

});

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