如何创建按月排序的图表？答案

【问题标题】：How to create chart ordered by months?如何创建按月排序的图表？
【发布时间】：2016-04-14 10:11:08
【问题描述】：

我真的不知道如何创建以下图表，我正在使用 Visual Studio 2015、c#、windows forms。

我想创建一个图表（列类型），显示每个月的销售额总和以及按年份分隔的每个月的销售额。

我有以下 MySql 查询：

SELECT 
    SUM(p.IMPORT_BAS), MONTH(p.FECHA_PED), YEAR(p.FECHA_PED)
FROM
    pedidoscab p
WHERE
    p.FECHA_PED >= '2014-04-14'
        AND p.FECHA_PED <= '2016-04-14'
GROUP BY MONTH(p.FECHA_PED) , YEAR(p.FECHA_PED)
ORDER BY YEAR(p.FECHA_PED) , MONTH(p.FECHA_PED)

结果示例：

SUM(p.IMPORT_BAS),MONTH(p.FECHA_PED),YEAR(p.FECHA_PED)
88.0000,8,2015
1546718.6556,11,2015
1000001.0000,3,2016
14.0000,4,2016

年份范围就是一个例子。对于不明白我想做什么的人，我在 google 中找到了一张图片。

我不需要线条，我只需要左右标签（+图例），一个月内可以有空值，但图表需要始终显示所有月份。

【问题讨论】：

能否添加读入数据的代码？你的目标是什么：Winforms？ WPF？ ASP？ ...?? 总是相应地标记您的问题！您需要确保将 x 值添加为日期时间并将间隔类型设置为月，将间隔设置为 1..
已编辑。我尝试了很多方法将结果放入图表中，我如何在一个月内输入值？

标签： c# winforms charts

【解决方案1】：

这是一个例子。我们先看一下结果：

现在是代码：

首先引用一些让生活更轻松的参考：

Axis XA = chart1.ChartAreas[0].AxisX;
Axis YA = chart1.ChartAreas[0].AxisY;
Series S1 = chart1.Series[0];

现在是测试数据。您将从DataReader 或DataTable..! 中提取它们！

// let's create 12 dates: 
// this year, first day of each month..:

List<DateTime> dates = new List<DateTime>();
DateTime dt = DateTime.Now;
for (int i = 1; i < 12; i++)
    dates.Add( new DateTime(dt.Year, i, 1));

现在我们将它们添加到具有随机 y 值的点：

foreach (DateTime d in dates)
    S1.Points.AddXY(d, R.Next(99) + 33);

让我们为图表添加一些样式：

// show the year in the legend:
S1.LegendText = "Year " + dt.Year;
// move to the bottom center:
chart1.Legends[0].Docking = Docking.Bottom;
chart1.Legends[0].Alignment = StringAlignment.Center;

S1.XValueType = ChartValueType.Date;  // set the type
XA.MajorGrid.Enabled = false;         // no gridlines
XA.LabelStyle.Forma t = "MMM";         // show months as names

XA.IntervalType = DateTimeIntervalType.Months;  // show axis labels.. 
XA.Interval = 1;                                // ..every 1 months

YA.LabelStyle.Format = "##0$";  // for kilos etc you need to scale the y-values!

要在后台创建交替条，请使用如下代码：

YA.IsInterlaced = true;
YA.MajorGrid.Enabled = false;
YA.InterlacedColor = Color.FromArgb(31, Color.LightSeaGreen);

请注意，最好实际添加 正好 12 个值。这使显示年份时的生活变得更加轻松。

因此 数据绑定 到您的查询将无法直接工作。相反，您需要按年份将数据分成它们自己的数据结构，并为这些年份添加和绑定一个系列。

或者不要绑定每个点并将其添加到正确的系列中，也许可以将其用作系列集合中的索引器..

【讨论】：

【解决方案2】：

您可以使用如下所示的高图表，只需将值替换为您的值：-

HTML 和脚本

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>


<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
    <asp:Literal runat="server" ID="lit_text"></asp:Literal>
</body>
</html>

C#代码

 protected void Page_Load(object sender, EventArgs e)
        {
            lit_text.Text = @"<script>$(function () {
    $('#container').highcharts({

        title: {
            text: 'Bussiness Result 2005 v 2006'
        },
        xAxis: {
            categories: [
                'Jan',
                'Feb',
                'Mar',
                'Apr',
                'May',
                'Jun',
                'Jul',
                'Aug',
                'Sep',
                'Oct',
                'Nov',
                'Dec'
            ],
            crosshair: true
        },
        yAxis: {
            min: 0
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: '2005',
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]  ,type: 'column'

        }, {
            name: '2006',
            data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3],type: 'column'

        }, {
            name: 'Quality',
            data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2],type: 'line'

        }]
    });
});</script>";
        }

【讨论】：

我使用的是 c# 而不是 js。
你可以在容器 div 下使用 c# set literal 然后从你的 c# code set literal.text 中使用它
如果你愿意，我可以帮助你使用 teamviewer
我不允许在工作中使用teamviewer，如果你能给我一个使用c#的例子，那就太好了，谢谢你。
好的，给我一分钟