Recently, the company asked for a report. displays the annual sales evaluation chart. this suddenly reminds me of Microsoft's mschart control, because I have studied it before. so it is not very laborious. to be accurate, I don't have a different idea once. I have a different feeling. I also hope that the things I have come up with will be good for everyone!
Well, I have never liked to talk nonsense. I suddenly said so much... paste the source code directly from the project! I hope you can give me more advice. Thank you!
ASP. NET front-end:
<Div class = "mychartcss"> <br/> <asp: chart id = "chart1" runat = "server" width = "1024px"> <br/> <Series> <br/> <asp: series name = "sales"> <br/> </ASP: Series> <br/> </series> <br/> <chartareas> <br/> <asp: chartarea name = "chartarea1"> <br/> </ASP: chartarea> <br/> </chartareas> <br/> <legends> <br/> <asp: legend alignment = "center" Docking = "bottom" name = "legend1" Title = "sales analysis"> <br/> </ASP: legend> <br/> </legends> <br/> <titles> <br/> <asp: title Font = ", 16pt "name =" title1 "text =" French Royal dragon boat overall sales evaluation form "> <br/> </ASP: title> <br/> </titles> <br/> </ASP: Chart> <br/> </
Main background source code:
/// <Summary> <br/> // bind the report control data source <br/> /// </Summary> <br/> Public void binddata () <br/>{< br/> ilist <nop_product> DATA = bindchartproduct (); <br/> # region not used yet <br/> // chartarea = setchartareastyle ("chart1", true); <br/> // list <int> DATA = models. staticmodel. createstaticdata (); <br/> // system. web. UI. datavisualization. charting. chart chart2 = new system. web. UI. datavisualization. charting. chart (); <br/> // chart2.width = 412; <br/> // chart2.height = 296; <br/> // chart2.rendertype = system. web. UI. datavisualization. charting. rendertype. imagetag; <br/> // chart2.palette = chartcolorpalette. brightpastel; <br/> // Title T = new title ("IMG source streamed from controller", docking. top, new system. drawing. font ("trebuchet ms", 14, system. drawing. fontstyle. bold), system. drawing. color. fromargb (26, 59,105); <br/> // chart2.titles. add (t); <br/> // chart2.chartareas. add ("Series 1"); <br/> // populate series with random data <br/> // random = new random (); <br/> // For (INT pointindex = 0; pointindex <10; pointindex ++) <br/> // {<br/> // chart1.series [0]. points. addy (random. next (45, 95); <br/> /// chart1.series ["series2"]. points. addy (random. next (5, 75); <br/> //} <br/> # endregion <br/> for (INT I = 0; I <data. count; I ++) <br/>{< br/> chart1.series [0]. points. addy (data [I]. quantity); <br/>}< br/> chart1.borderskin. skinstyle = borderskinstyle. emboss; <br/> chart1.borderlinewidth = 2; <br/> chart1.bordercolor = system. drawing. color. black; <br/> chart1.borderlinedashstyle = chartdashstyle. solid; <br/> chart1.borderwidth = 2; <br/> chart1.chartareas ["chartarea1"]. axisx. majorgrid. enabled = false; // The split line is not displayed. <br/> chart1.chartareas ["chartarea1"]. axisy. title = "sales quantity (bottle)"; <br/> chart1.chartareas ["chartarea1"]. axisx. title = "Time (yyyy-mm)"; <br/> # region not used yet <br/> // chart1.legends. add ("Wine type"); <br/> // legend = new legend (ddrtypename. selectedvalue); <br/> // 26, 59,105 <br/> // legend. backcolor = color. transparent; // color. fromargb (26, 59,105, 0); <br/> // legend. bordercolor = color. gray; <br/> // legend. font = new system. drawing. font ("trebuchet ms", float. parse ("8.25"), fontstyle. bold, graphicsunit. world); <br/> // legend. isdockedinsidechartarea = true; <br/> // legend. dockedtochartarea = ddrtypename. selectedvalue; <br/> // chart1.chartareas ["chartarea1"]. axisx. interval = 1; // X axis data display interval <br/> // chart1.chartareas ["chartarea1"]. axisx. intervaltype = datetimeintervaltype. days; <br/> // chart1.chartareas ["chartarea1"]. axisx. intervaloffset = 0.0; <br/> // chart1.chartareas ["chartarea1"]. axisx. intervaloffsettype = datetimeintervaltype. days; <br/> # endregion <br/> chart1.chartareas ["chartarea1"]. axisx. labelstyle. format = "YYYY mm Month"; <br/> chart1.chartareas ["chartarea1"]. axisy. interval = 20; // y axis data display interval <br/> chart1.datasource = data; <br/> chart1.series [0]. yvaluemembers = "quantity"; <br/> chart1.series [0]. xvaluemember = "createdon"; <br/> chart1.databind (); <br/> // set series chart type <br/> chart1.series [0]. charttype = seriescharttype. line; <br/> // chart1.series ["series2"]. charttype = seriescharttype. spline; <br/> // set point labels <br/> chart1.series [0]. isvalueshownaslabel = true; <br/> // chart1.series ["series2"]. isvalueshownaslabel = true; <br/> // Enable X axis margin <br/> chart1.chartareas ["chartarea1"]. axisx. ismarginvisible = true; <br/> // enable 3D, and show data point Marker lines <br/> chart1.chartareas ["chartarea1"]. area3dstyle. enable3d = false; <br/> chart1.series [0] ["showmarkerlines"] = "true "; <br/> // chart1.series ["series2"] ["showmarkerlines"] = "Tru
The chartarea area can also be dynamically generated. There are a lot of online materials. Here I only post my usage
/// <Summary> <br/> // define chartarea <br/> /// </Summary> <br/> /// <Param name = "name"> chartarea name </param> <br/> // <Param name = "area3dstyle"> enable 3D </param> <br/> // <returns> </returns> <br/> Public static chartarea setchartareastyle (string name, bool area3dstyle) <br/>{< br/> chartarea mychararea = new chartarea (name); <br/> mychararea. axisx. linecolor = system. drawing. color. fromargb (64, 64, 64, 64); <br/> mychararea. axisx. labelstyle. font = new system. drawing. font ("trebuchet ms", float. parse ("8.25"), fontstyle. regular); <br/> mychararea. axisx. majorgrid. linecolor = system. drawing. color. fromargb (64, 64, 64, 64); <br/> mychararea. axisy. linecolor = system. drawing. color. fromargb (64, 64, 64, 64); <br/> mychararea. axisy. labelstyle. font = new system. drawing. font ("trebuchet ms", float. parse ("8.25"), fontstyle. regular); <br/> mychararea. axisy. majorgrid. linecolor = system. drawing. color. fromargb (64, 64, 64); <br/> If (area3dstyle) <br/>{< br/> mychararea. area3dstyle. enable3d = true; <br/> mychararea. area3dstyle. isrightangleaxes = false; // whether to tilt <br/> mychararea. area3dstyle. isclustered = false; <br/> // chart1.chartareas ["chartarea1"]. area3dstyle. wallwidth = 0; // controls the 3D display of the wall width </P> <p> mychararea. area3dstyle. inclination = 15; // X skew <br/> mychararea. area3dstyle. rotation = 10; // y skew <br/> mychararea. area3dstyle. perspective = 10; <br/>}< br/> mychararea. backcolor = system. drawing. color. fromargb (64,165,191,228); <br/> // backsecondarycolor = "Transparent" bordercolor = "64, 64, 64" <br/> mychararea. backsecondarycolor = system. drawing. color. transparent; <br/> mychararea. bordercolor = system. drawing. color. fromargb (64, 64, 64, 64); <br/> mychararea. axisy. scalebreakstyle. enabled = true; // enable contrast disparity <br/> // mychararea. axisx. interval = 1; <br/> // mychararea. axisy. interval = 5000; // The minimum unit of the forced Y axis is 5000. <br/> // mychararea. axisx. majorgrid. interval = 1; <br/> // mychararea. area3dstyle. enable3d = true; <br/> // mychararea. alignmentorientation = areaalignmentorientations. horizontal; <br/> // mychararea. axisy. enabled = axisenabled. false; <br/> // mychararea. axisy2.enabled = axisenabled. true; <br/> // mychararea. axisx. labelstyle. isendlabelvisible = false; <br/> return mychararea; <br/>}
Here, I will only write my own research results. If anything is inappropriate, I hope you will give me more advice and make progress together. Thank you.