amchart控件画图使用技巧

最新推荐文章于 2022-04-10 21:31:21 发布

原创最新推荐文章于 2022-04-10 21:31:21 发布 · 215 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ui #c#

Asp.Net 专栏收录该内容

53 篇文章

订阅专栏

本文详细介绍了如何使用图表组件进行数据展示，包括柱状图、折线图的配置，如显示对应值、隐藏图框、添加标题、传值、定义颜色数组、控制X轴显示数、添加图片标题栏、鼠标右键导出图片、前后台和后台代码实现等。此外，还涵盖了图表的动画显示快慢、双坐标轴值设置、去掉动画效果、按顺序显示柱子效果等内容。

1.柱状图显示对应值:（设置ColumnDataLabelFormatString="{value}",LineBalloonTextFormatString="{value}" )
<cc1:columnchart id="PieChart1" runat="server" AreaFillAlpha="40" Bullet="RoundOutlined"
            ColumnBorderAlpha="90" ColumnBorderColor="Black" ColumnDataLabelFormatString="{value}"
            ColumnGrowTime="5" Depth="15" LineBalloonTextFormatString="{value}" PlotAreaBackgroundAlpha="10"
            PlotAreaBackgroundColor="Yellow" >
            <Graphs>
                   <cc1:ColumnChartGraph ID="ColumnChartGraph1" runat="server" BulletSize="6" Title="" VisibleInLegend="false">
                    </cc1:ColumnChartGraph>
                 </Graphs>
            <%--<Labels>
                <cc1:ChartLabel Align="Center" Text="&lt;b&gt;Some sample data&lt;/b&gt;" />
            </Labels>--%>
</cc1:columnchart></p>

2.隐藏图下面的方框:（设置VisibleInLegend="false"）
<cc1:ColumnChartGraph ID="ColumnChartGraph1" runat="server" BulletSize="6" Title="" VisibleInLegend="false">

3.在图片上端加标题:(设置Text的内容)
<Labels>
                <cc1:ChartLabel Align="Center" Text="&lt;b&gt;Some sample data&lt;/b&gt;" />
</Labels>

4.aspx页面传值：
<img alt="" src="sjfxtj.aspx?type=<%= ptype %>&type1=<%=ptype1%>&type3=<%=dyear1%>"/>&nbsp;<br/>

5.定义颜色数组
Color[] clor = new Color[] { Color.Red, Color.Chocolate, Color.Yellow, Color.Gold, Color.Lime,Color.Khaki,Color.Black,Color.Blue };//颜色显示

6.折线图控制X轴显示数：(设置XGridApproxLineCount="12"属性)
<p> <cc1:LineChart id="PieChart1" runat="server" LegendValueTextFormatString="{value}" GraphSettingsInData="true" XGridApproxLineCount="12">
            <Graphs>
                   <cc1:LineChartGraph ID="LineChartGraph1" runat="server" BulletSize="6" Title="" VisibleInLegend="false">
                    </cc1:LineChartGraph>
                 </Graphs>
            <%--<Labels>
                <cc1:ChartLabel Align="Center" Text="&lt;b&gt;Some sample data&lt;/b&gt;" />
            </Labels>--%>
</cc1:LineChart></p>

7. 添加图片标题栏
        ChartLabel item = new ChartLabel();

            item.Align =LabelAlignments.Center;//居中显示
            item.Text = "统计图";
            PieChart1.Labels.Add(item);

8.鼠标右键导出图片为jpg格式
   设置<cc1:columnchart ExportAsImageEnabled="true" ExportAsImageMessageText="图片导出"></cc1:columnchart>

9.前后台和后台具体实现代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="rysh_tjinfo.aspx.cs" Inherits="tongji_rysh_tjinfo" MasterPageFile ="~/site.master" %>

<%@ Register Assembly="am.Charts" Namespace="am.Charts" TagPrefix="cc1" %>
<asp:Content ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
       <p> <cc1:columnchart id="PieChart1" runat="server" AreaFillAlpha="40" Bullet="RoundOutlined"
            ColumnBorderAlpha="90" ColumnBorderColor="Black" ColumnDataLabelFormatString="{value}"
            ColumnGrowTime="5" Depth="15" LineBalloonTextFormatString="{value}" PlotAreaBackgroundAlpha="10"
            PlotAreaBackgroundColor="Yellow" >
            <Graphs>
                   <cc1:ColumnChartGraph ID="ColumnChartGraph1" runat="server" BulletSize="6" Title="蓝色">
                    </cc1:ColumnChartGraph>
                    <cc1:ColumnChartGraph ID="ColumnChartGraph2" runat="server" BulletSize="6" Title="红色">
                    </cc1:ColumnChartGraph>
                 </Graphs>
            <%--<Labels>
                <cc1:ChartLabel Align="Center" Text="&lt;b&gt;Some sample data&lt;/b&gt;" />
            </Labels>--%>
        </cc1:columnchart></p>
       <asp:XmlDataSource ID="XmlDataSource1" runat="server" ></asp:XmlDataSource>
</asp:Content>

cs页代码:

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using am.Charts;
using System.Drawing;
using System.Collections.Generic;
using System.Xml;
using System.Web.UI.MobileControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        GetXml();
        PieChart1.DataSeriesIDField = "year";
        PieChart1.DataSourceID = "XmlDataSource1";
        List<LineChartGraph> parabola = new List<LineChartGraph>();
        PieChart1.Graphs[0].DataSeriesItemIDField = "year";
        PieChart1.Graphs[0].DataSourceID = "XmlDataSource1";
        PieChart1.Graphs[0].DataValueField = "val";

        PieChart1.Graphs[1].DataSeriesItemIDField = "year";
        PieChart1.Graphs[1].DataSourceID = "XmlDataSource1";
        PieChart1.Graphs[1].DataValueField = "valall";

        XmlDataSource1.DataFile = "d:/testdatafile_for_columnline.xml";
        XmlDataSource1.XPath = "/pricelist/price";


     }

    private void GetXml()
    {
        XmlDocument xmlDoc = new XmlDocument();
        // 添加XML声明 
        XmlDeclaration xmlDeclaration = xmlDoc.CreateXmlDeclaration("1.0", "utf-8", "yes");
        xmlDoc.PrependChild(xmlDeclaration);
        // 添加根元素 
        XmlElement nodeElement = xmlDoc.CreateElement("pricelist");
        xmlDoc.AppendChild(nodeElement);

        string[] strtext = new string[] { "1991", "1992", "1993", "1994", "1995", "1996", "1997" };
        string[] strval = new string[] { "1000", "2992", "3993", "4994", "3595","2000","5000" };
        string[] strvalnew = new string[] { "3000", "2992", "4993", "6994", "8595", "3000", "6000" };

        XmlElement[] XmlNode = new XmlElement[strtext.Length];
        for (int i = 0; i < XmlNode.Length; i++)
        {
            XmlNode[i] = xmlDoc.CreateElement("price");
            //xe1.InnerText = "www";
            XmlNode[i].SetAttribute("year", strtext[i].ToString());//设置属性
            XmlNode[i].SetAttribute("val", strval[i].ToString());
            XmlNode[i].SetAttribute("valall", strvalnew[i].ToString());
            xmlDoc.DocumentElement.AppendChild(XmlNode[i]);
        }

        xmlDoc.Save("d:/testdatafile_for_columnline.xml");
    }
}

10. 设置双坐标轴值:(设置Axis="Right"属性)
<Graphs>
                   <cc1:LineChartGraph ID="LineChartGraph1" runat="server" BulletSize="6" Title="

蓝色">
                    </cc1:LineChartGraph>
                    <cc1:LineChartGraph ID="LineChartGraph2" runat="server" BulletSize="6" Title="

红色" Axis="Right">
                    </cc1:LineChartGraph>
                </Graphs>

11.动画显示快慢属性：(在<cc1:columnchart></cc1:columnchart>中设置ColumnGrowEffect="Strong")

12.去掉动画效果：(在<cc1:columnchart></cc1:columnchart>中设置ColumnGrowTime="0")

13.柱状图按顺序显示柱子效果：（在<cc1:columnchart></cc1:columnchart>中设置ColumnSequencedGrow=“true”）