Question

我试图在nodejs中使用highcharts创建柱形图，并且从mongodb获取数据。我被困在系列选项中请帮助我摆脱它。

以下是我的ejs文件代码 -

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Pie Highcharts Example</title>


    <!--  Add these JavaScript inclusions in the head of your page -->
    <script type="text/javascript" src="/javascripts/jquery.min.js"></script>
    <script type="text/javascript" src="/javascripts/highcharts.js"></script>


    <!-- Optional: the exporting module -->
    <script type="text/javascript" src="/javascripts/exporting.js"></script>


    <!--  Add the JavaScript to initialize the chart on document ready -->
    <script type="text/javascript">
         chartdata= <%-JSON.stringify(data)%>

        var category = [];
        var dname=[];
        var kdata=[];
        for(j=0;j<chartdata.length;j++){
            category[j]=[chartdata[j].catname]
            // name[j]=[chartdata[j].seriesname]
            // data[j]=[chartdata[j].wdata,chartdata[j].hdata,chartdata[j].cdata]
        }
        for(k=0;k<chartdata.length;k++){
            dname[k]=[chartdata[k].seriesname];
        }
        for(i=0;i<chartdata.length;i++){
             kdata[i] = [chartdata[i].wordval,chartdata[i].codeval,chartdata[i].highval];

        }
        var chart;
        $(document).ready(function() {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    defaultSeriesType: 'column'
                },
                title: {
                    text: 'Monthly Average data'
                },

                xAxis: {
                    categories: category
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Rainfall (mm)'
                    }
                },
                legend: {
                    layout: 'vertical',
                    backgroundColor: '#FFFFFF',
                    align: 'right',
                    verticalAlign: 'top',
                    x: 0,
                    y: 40,
                    floating: true,
                    shadow: true
                },
                tooltip: {
                    formatter: function() {
                        return ''+
                            this.series.name +': '+ this.y ;
                    }
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.3,
                        borderWidth: 0
                    }
                },
                series: [{
                    name: dname[0],
                    data: kdata[0]

                },
                {
                    name: dname[1],
                    data: kdata[1]

                },
                {
                    name: dname[2],
                    data: kdata[2]

                }
                ]
            });


        });

    </script>

</head>
<body>
    <!-- Add the container -->
    <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>

@NishithChaturvedi - 当我这样做的时候它的工作只有循环的问题我知道我问的是愚蠢的问题，但是无法纠正。

Answer 1

感谢您的时间我已经解决了我所遇到的系列值问题我刚创建了另一个数组var并将名称和数据存储到它并将该数组串行传递。

Highcharts柱形图，包含来自mongodb的数据

1 个答案: