图表显示按月记录的数据

Question

我有一个表，记录中的日期字段列的值类似

Date  (column 1)                

11/1/2019        
12/1/2012                
12/1/2012                
1/3/2013             
1/3/2013             
1/3/2013                
1/3/2013             
etc.

Orders  (column 2) 

project     
project    
project    
project

我想显示按月中断的许多记录到图表。我对此一无所知

赞

Answer 1

1。首先，您需要从nuget下载。

highcharts.js and
highchartexporting.js

2。然后在要显示图形的位置声明w。 喜欢，

<div id="MonthlyColLine" style="width: 700px; height: 250px; margin: 0 auto"></div>

3。然后添加渲染图形 喜欢， //将下载的higcharts.js和highchartexporting.js链接到显示图的位置

<script language="javascript" type="text/javascript">


            Highcharts.setOptions({
                lang: {
                    decimalPoint: '.',
                    thousandsSep: ' '
                }
            });
            $("#MonthlySales").highcharts({
                chart: {
                    type: 'column'
                },
                title: {
                    text: ''
                },
                subtitle: {
                    text: 'Month Wise Sales',
                    style: {
                        color: '#44994a',
                        fontWeight: 'bold'
                    }
                },
                xAxis: {
                    type: 'category'
                },
                yAxis: {
                    title: {
                        text: 'Amount in Crore.'
                    }
                },
                legend: {
                    enabled: true
                },
                plotOptions: {
                    series: {
                        borderWidth: 0,
                        dataLabels: {
                            enabled: true,
                            format: '{point.y:.1f}'
                        }
                    }
                },
                tooltip: {
                    headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                    pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}</b> of total<br/>'
                },
                "series": [
                    {
                        "name": "Sales",
                        "colorByPoint": true,
                        "data": [
                            {
                                "name": "Jan",
                                "y": 18000,//Ypur data here

                            },
                            {
                                "name": "Feb",
                                "y": 20000,

                            },
                            {
                                "name": "March",
                                "y": 20000,

                            },
                            {
                                "name": "April",
                                "y": 2000,

                            },
                            {
                                "name": "May",
                                "y": 2000,

                            },
                            {
                                "name": "June",
                                "y": 2000,

                            },
                            {
                                "name": "July",
                                "y": 2000,

                            },
                            {
                                "name": "Aug",
                                "y":2000,

                            },
                            {
                                "name": "Sep",
                                "y": 2000,

                            },
                            {
                                "name": "Oct",
                                "y": 2000,

                            },
                            {
                                "name": "Nov",
                                "y": 2000,

                            },
                            {
                                "name": "Dec",
                                "y": 2000,

                            }


                        ]
                    }
                ]
            });


        }

    </script>