Question

我真的不知道如何创建下面的图表，我正在使用Visual Studio 2015，c＃，windows窗体。

我想创建一个图表（列类型），它显示每个月和每月销售额之间的销售总额。

我有以下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

年份范围就是一个例子。对于那些不了解我想做什么的人，我在谷歌找到了一张图片。

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

Answer 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个值。这让一年的生活变得更轻松。

因此，您的查询的数据绑定将无法直接生效。相反，您需要将数据按年分成自己的数据结构，并为这些年添加和绑定系列..

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

Answer 2

您可以使用以下高图表，只需用您的值替换值： -

HTML＆amp;脚本

<!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>"; }

如何按月订购图表？

2 个答案: