MSChart图表控件的一些使用

行走在理想边缘 2018-11-18

展开全文

最近使用mschart做了几张图表，微软提供的例子中对这个图表控件的使用已经说的比较详细了，我这里记录一些需要注意的。

1. chart图表的元素

要使用该图表首先要了解该图表的元素组成，就是下面这张图了，
clip_image002

图表主要包含：

annotations （图形注解集合）
chartareas（图表区域集合）
legends（图例集合）
series图表序列集合即图表数据对象集合）
title（图标的标题集合）

其他大家可以参考samples中的char features一节。

2. 如何在asp.net mvc中使用chart控件

2.1.需要在"<system.web><pages><controls>"中添加如下：

<add tagprefix="asp" namespace="system.web.ui.datavisualization.charting" assembly="system.web.datavisualization, 
version=3.5.0.0, culture=neutral, publickeytoken=31bf3856ad364e35"/>

2.2.在"<httphandlers>"中添加如下部分：

<add path="chartimg.axd" verb="get,head" type="system.web.ui.datavisualization.charting.charthttphandler, 
system.web.datavisualization, version=3.5.0.0, culture=neutral, publickeytoken=31bf3856ad364e35" validate="false"/>

2.3. 有了上面的配置就可以测试了：

2.3.1.view中添加：

<asp:chart id="chart1" runat="server" height="296px" width="412px" palette="brightpastel" imagetype="png" 
borderdashstyle="solid" backsecondarycolor="white" backgradientstyle="topbottom" borderwidth="2" backcolor="#d3dff0" 
bordercolor="26, 59, 105">
<titles>
<asp:title text="with datasource in code behind" />
</titles>
<legends>
<asp:legend istextautofit="false" name="default" backcolor="transparent" font="trebuchet ms, 8.25pt, style=bold">
</asp:legend></legends>
<borderskin skinstyle="emboss"></borderskin>
<series>
<asp:series name="column" bordercolor="180, 26, 59, 105">
</asp:series>
</series>
<chartareas>
<asp:chartarea name="chartarea1" bordercolor="64, 64, 64, 64" borderdashstyle="solid" backsecondarycolor="white" 
backcolor="64, 165, 191, 228" shadowcolor="transparent" backgradientstyle="topbottom">
<area3dstyle rotation="10" perspective="10" inclination="15" isrightangleaxes="false" wallwidth="0" 
isclustered="false">
</area3dstyle>
<axisy linecolor="64, 64, 64, 64">
<labelstyle font="trebuchet ms, 8.25pt, style=bold" />
<majorgrid linecolor="64, 64, 64, 64" />
</axisy>
<axisx linecolor="64, 64, 64, 64">
<labelstyle font="trebuchet ms, 8.25pt, style=bold" />
<majorgrid linecolor="64, 64, 64, 64" />
</axisx>
</asp:chartarea>
</chartareas>
</asp:chart>

2.3.2.index.aspx.cs中添加

protected void page_load(object sender, system.eventargs e)
{
    foreach (int value in (list<int>)this.viewdata["chart"])
    {
    this.chart1.series["column"].points.add(value);
    }
}

2.3.3.controller中：

public actionresult index()
{
    viewdata["title"] = "home page";
    viewdata["message"] = "welcome to asp.net mvc!";
    list<int> chartlist = new list<int>();
    chartlist.add(1);
    chartlist.add(2);
    chartlist.add(6);
    chartlist.add(5);
    chartlist.add(4);
    viewdata["chart"] = chartlist;
    return view();
}

2.3.4.添加system.web.ui.datavisualization引用

3. tooltip的使用

tooltip用于在各个关键点，如：标签、图形关键点、标题等当鼠标移动上去的时候，提示用户一些相关的详细或说明信息。我们可以通过如下代码来设置：

chart1.series["series1"].tooltip = "#valy";
这里的主要目的是说下，系统已经提供了很多keyword 供我们使用，如下图：

clip_image002[6]

4. "error executing child request for chartimg.axd"的处理

<add name="chartimagehandler" precondition="integratedmode" verb="post,get,head" path="chartimg.axd"
和
<add path="chartimg.axd"verb="post,get,head"type="system.web.ui.datavisualization.charting.charthttphandler,

这两个地方都加上post就好了

5.图表的呈现

chartk控件的imagestoragemode属性是决定如片的存储方式的。

5.1.当chart.imagestoragemode=usehttphandler时

使用的是web.config中的配置。即指定由http处理程序来存储图形文件，web.config的配置如下：

<add key="chartimagehandler" value="storage=file;timeout=20;dir=c:\tempimagefiles\;deleteafterservicing=false; 
webdevserveruseconfigsettings=false" />

5.1.1.其中c:\tempimagefiles\就是http处理程序来存储图形文件的目录。

5.1.2.deleteafterservicing，在图片被浏览器成功下功下载后，确定

此文来自: 马开东博客转载请注明出处网址： http://www.

服务器上图片是否删除，默认值为false。如果不指定deleteafterservicing，图片是不
会被存储为文件的，应当只是暂存在内存中。

5.1.3.webdevserveruseconfigsettings，当在vs开发服务器中，即运行在完全信任级别（full trust level）环境时，决定生成的图片是否被保存在内存中。

5.1.4storage存储3种方式:storage=file，storage=session，storage=memory.

5.2. 当chart.imagestoragemode= useimagelocation时

图表会存储在我们指定的文件夹中，我们也可以指定图片生成的命名规则。

5.2.1.其中chart.imagetype表示生成图形文件的格式，可以是bmg、jpeg、png、emf。

5.2.2. chart.rendertype

此属性决定mschart生成的图形以何种方式送到客户端，有三种：

imagetag，图形在服务端保存为临时文件，并将临时文件的url作为html中<img>标签的src属性值。而此临时文件的url规则及临时文件如何生成可由imagelocation属性确定。
binarystreaming，不在服务端生成图形文件，<img>标签的src属性值将指向另一个负责生成图形的.aspx页面。
imagemap，不显示实际的图形，仅创建图片热区（image map）。

默认值是imagetag，就是会在服务端生成临时文件。

5.2.3.只要在服务端生成图形文件，无论存储在哪个目录下，asp.net帐户都需要拥有该目录的写入权限。

下面是我的一张图表：

mschart