c# - 图表显示按月记录的数据

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

我想在图表中显示一些按月埋葬的记录。我对此一无所知

像这样

标签： c#asp.net

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>