&&& 本文主要通过示例讲解自定义 Visifire 图表的数据点（DataPoint）的颜色和自定义图表的图例（Legend）。
&&& Visifire 图表中已经内置了十五种颜色方案可供我们选择，在制作图表时如果不指定要使用的颜色方案，Visifire 会自动使用第一种颜色方案 Visifire1 作为默认的颜色方案。有时我们会想使用自己定义的颜色作为图表的颜色方案，这可以通过 Visifire 的 ColorSet 属性指定我们要使用的颜色。下面是通过 Xaml 创建图表时使用自定义颜色方案的示例代码：
&!-- Chart 的属性 ColorSet 指定要使用自定义的颜色方案 myColors --&
&vc:Chart ColorSet="myColors" Grid.Column="0" Grid.RowSpan="2" Width="300" Height="300"&
&vc:Chart.ColorSets&
&vc:ColorSet Id="myColors"&
&vc:ColorSet.Brushes&
&!-- 自定义的颜色方案 --&
&SolidColorBrush Color="Green" /&
&SolidColorBrush Color="Red" /&
&SolidColorBrush Color="Blue" /&
&SolidColorBrush Color="Yellow" /&
&SolidColorBrush Color="Orange" /&
&/vc:ColorSet.Brushes&
&/vc:ColorSet&
&/vc:Chart.ColorSets&
&vc:Chart.Series&
&!--ShowInLegend 设置是否显示图例--&
&vc:DataSeries LegendText="Series1" ShowInLegend="True" RenderAs="Column" AxisYType="Primary" &
&vc:DataSeries.DataPoints&
&vc:DataPoint YValue="20" /&
&vc:DataPoint YValue="40" /&
&vc:DataPoint YValue="50" /&
&vc:DataPoint YValue="60" /&
&vc:DataPoint YValue="30" /&
&/vc:DataSeries.DataPoints&
&/vc:DataSeries&
&/vc:Chart.Series&
&/vc:Chart&
运行结果如下： 通过C# 设置自定义数据点颜色示例:
// 新建一个 Chart 实例
Chart chart = new Chart();
chart.Width = 300;
chart.Height = 300;
// 新建一个 ColorSet 实例
ColorSet cs = new ColorSet();
cs.Id = "colorset1"; // 设置ColorSet 的 Id 为 colorset1
cs.Brushes.Add(new SolidColorBrush(Colors.Green));
cs.Brushes.Add(new SolidColorBrush(Colors.Red));
cs.Brushes.Add(new SolidColorBrush(Colors.Blue));
cs.Brushes.Add(new SolidColorBrush(Colors.Yellow));
cs.Brushes.Add(new SolidColorBrush(Colors.Orange));
chart.ColorSets.Add(cs);
chart.ColorSet = "colorset1";
// 设置 Chart 使用自定义的颜色集合 colorset1
DataSeries dataSeries = new DataSeries();
dataSeries.RenderAs = RenderAs.C
dataSeries.DataPoints.Add(new DataPoint
YValue = 20
dataSeries.DataPoints.Add(new DataPoint
YValue = 40
dataSeries.DataPoints.Add(new DataPoint
YValue = 50
dataSeries.DataPoints.Add(new DataPoint
YValue = 60
dataSeries.DataPoints.Add(new DataPoint
YValue = 30
chart.Series.Add(dataSeries);
上面代码的运行结果和使用 Xaml 代码的图标的结果相同。
颜色集合中的颜色数量可以和数据集合中的数据点不一样，如果颜色数量小于数据点数量，Visifire 会循环使用颜色集合中的颜色来设置数据点的颜色；如果颜色数量大于数据点的数量，Visifire 会使用颜色集合中的和数据点数量相同的前几个颜色来设置数据点的颜色。
有时在同一页面中会有多个图表，而这多个图表的数据点的数量与颜色又是一样的，我们想让这多个图表共同使用一个图例，此时如果图表的数据点颜色是通过上面的方法自定义的，那么我们可以使用自己设置的颜色很容易设置一个图例；但是如果使用的是 Visifire 中预设的颜色呢，这时还可以让多个图表共用一个我们自己设置的图例吗？答案当然肯定的。有人可能会想到 Chart 有一个 ColorSets 属性，我们可以通过个属性来取得图表使用的颜色，然后再设置一个图例。但是非常遗憾的时，使用预设的颜色时 Chart 的 ColorSets 属性是空的。那么怎么取得 Visifire 预设的颜色集合呢？Visifire 的预设颜色集合保存的一个名为&Visifire.Charts.ColorSets.xaml&的文件中，我们可以通过这个文件取得 Visifire 的预设的颜色集合，然后在 Chart 加载完毕时通过 Chart 的 ColorSet 属性来取得 Chart 使用的颜色集合。示例代码如下：
private void CreateChart1()
Chart chart = new Chart();
chart.ColorSet = "VisiRed"; // Visifire1
chart.Loaded += new RoutedEventHandler(chart1_Loaded);
chart.Width = 300;
chart.Height = 300;
DataSeries dataSeries = new DataSeries();
dataSeries.RenderAs = RenderAs.C
dataSeries.DataPoints.Add(new DataPoint
YValue = 20
dataSeries.DataPoints.Add(new DataPoint
YValue = 40
dataSeries.DataPoints.Add(new DataPoint
YValue = 50
dataSeries.DataPoints.Add(new DataPoint
YValue = 60
dataSeries.DataPoints.Add(new DataPoint
YValue = 30
chart.Series.Add(dataSeries);
spLegend.Children.Add(chart);
// Chart 加载完毕时的事件
void chart1_Loaded(object sender, RoutedEventArgs e)
Chart chart = sender as C
if (chart != null)
// 新建一个 ColorSet 集合
ColorSets emcs = new ColorSets();
string resourceName = "Visifire.Charts.ColorSets.xaml";
// Visifire 默认颜色集合的文件
using (System.IO.Stream s = typeof(Chart).Assembly.GetManifestResourceStream(resourceName))
if (s != null)
System.IO.StreamReader reader = new System.IO.StreamReader(s);
String xaml = reader.ReadToEnd();
emcs = System.Windows.Markup.XamlReader.Load(xaml) as ColorS
reader.Close();
s.Close();
// 根据名称取得 Chart 的 ColorSet ( Chart 的 ColorSet 属性为颜色集的名称 )
ColorSet cs = emcs.GetColorSetByName(chart.ColorSet);
// 显示图例的 StackPanel
StackPanel sp = new StackPanel()
Orientation = Orientation.Horizontal,
VerticalAlignment = System.Windows.VerticalAlignment.Top,
HorizontalAlignment = System.Windows.HorizontalAlignment.Center
// 图例文本
string[] legendText = { "鸡", "鸭", "鹅", "狗", "猫" };
// 自定义图例
for (int i = 0; i & chart.Series[0].DataPoints.C i++)
Grid grid = new Grid();
grid.Margin = new Thickness(15, 0, 0, 0);
ColumnDefinition cd1 = new ColumnDefinition();
grid.ColumnDefinitions.Add(cd1);
ColumnDefinition cd2 = new ColumnDefinition();
grid.ColumnDefinitions.Add(cd2);
Rectangle rect = new Rectangle()
Width = 10,
Height = 10,
Fill = cs.Brushes[i]
rect.SetValue(Grid.ColumnProperty, 0);
grid.Children.Add(rect);
TextBlock tb = new TextBlock()
Text = legendText[i],
Margin = new Thickness(5, 0, 0, 0),
Foreground = cs.Brushes[i]
tb.SetValue(Grid.ColumnProperty, 1);
grid.Children.Add(tb);
sp.Children.Add(grid);
spLegend.Children.Add(sp);
上面的代码先创建一个图表，然后在图表的加载完毕事件中取得图表使用的颜色集合来创建自定义图例。运行结果如下：
示例代码下：
阅读(...) 评论()&&&&&&& 在实际项目开展中，往往会牵扯到需要绘制图表的情况。而Visifire是一个比较美观大方的第三方图表控件，本文会讲述如何初步使用Visifire控件。
&&&&&&& 首先我们需要从Visifire的官方网站下载：，新建一个项目，引入SLVisifire.Charts.dll。在MainPage.xaml.cs代码中添加代码：using Visifire.C
&&&&&&& 准备工作做好了，此时我在这里直接编写了一个函数如下：
/// &summary&
/// 创建一个图表
/// &/summary&
/// &param name="tableName"&表名字&/param&
/// &param name="updateTime"&时间段的集合&/param&
/// &param name="value"&对应时间段集合的值&/param&
/// &param name="row"&本表在主Grid里面的ROW值&/param&
/// &param name="column"&本表在主Grid里面的column值&/param&
/// &param name="rihgtStr"&Y轴的后缀&/param&
/// &param name="tspan"&时间段间隔&/param&
/// &param name="chartInterval"&图表两点之间的间隔&/param&
/// &param name="intervaltype"&图表的X轴坐标按什么来分类，如时分秒&/param&
public void CreateChart(string tableName, List&DateTime& updateTime, List&string& value, int row, int column, string rihgtStr, TimeSpan tspan, int chartInterval, IntervalTypes intervaltype)
// 创建一个图标
Chart chart = new Chart();
// 设置图标的宽度和高度
chart.Width = 500;
chart.Height = 400;
chart.ToolBarEnabled = true;
// 设置图标的属性
chart.ScrollingEnabled = false;
chart.View3D = true;
// 创建一个标题的对象
Title title = new Title();
// 设置标题的名称
title.Text = tableN
title.Padding = new Thickness(0, 10, 5, 0);
// 向图标添加标题
chart.Titles.Add(title);
// 初始化一个新的Axis
Axis xAxis = new Axis();
// 设置axis的属性
//图表的X轴坐标按什么来分类，如时分秒
xAxis.IntervalType =
//图表中的X轴坐标间隔如2，3，20等，单位为xAxis.IntervalType设置的时分秒。
xAxis.Interval = chartI
//设置X轴的时间显示格式为7-10 11：20
xAxis.ValueFormatString = "hh:mm:ss";
//给图标添加Axis
chart.AxesX.Add(xAxis);
Axis yAxis = new Axis();
//设置图标中Y轴的最小值永远为0
yAxis.AxisMinimum = 0;
//设置图表中Y轴的后缀
yAxis.Suffix = rihgtS
chart.AxesY.Add(yAxis);
for (Int32 j = 0; j & 1; j++)
// 创建一个新的数据线。
DataSeries dataSeries = new DataSeries();
// 设置数据线的格式。
dataSeries.RenderAs = RenderAs.L
dataSeries.XValueType = ChartValueTypes.DateT
// 设置数据点
DataPoint dataP
for (int i = 0; i & updateTime.C i++)
// 创建一个数据点的实例。
dataPoint = new DataPoint();
// 设置X轴点
dataPoint.XValue = updateTime[i];
//设置Y轴点
dataPoint.YValue = double.Parse(value[i]);
dataPoint.MarkerSize = 8;
dataPoint.Tag = tableName.Split('(')[0];
//设置数据点颜色
// dataPoint.Color = new SolidColorBrush(Colors.LightGray);
dataPoint.MouseLeftButtonDown += new MouseButtonEventHandler(dataPoint_MouseLeftButtonDown);
//添加数据点
dataSeries.DataPoints.Add(dataPoint);
// 添加数据线到数据序列。
chart.Series.Add(dataSeries);
//将生产的图表增加到Grid，然后通过Grid添加到上层Grid.
Grid gr = new Grid();
gr.Children.Add(chart);
Grid.SetRow(gr, row);
Grid.SetColumn(gr, column);
gr.Margin = new Thickness(5);
gr.VerticalAlignment = VerticalAlignment.T
gr.HorizontalAlignment = HorizontalAlignment.L
//增加一个遮罩层到gr，将visifire的水印遮掉。
StackPanel sp = new StackPanel();
sp.Width = 160;
sp.Height = 18;
sp.Margin = new Thickness(0, 3, 6, 0);
sp.VerticalAlignment = VerticalAlignment.T
sp.HorizontalAlignment = HorizontalAlignment.R
sp.Background = new SolidColorBrush(Colors.White);
gr.Children.Add(sp);
LayoutRoot.Children.Add(gr);
&&&&&&& 通过此函数我们可以很方便的创建了一个Visifire图表，其创建的步骤那些我在这里不细说，大家直接看源码上的注释就可以了。因为我使用的Visifire是免费的版本，所有会有水印，在使用的过程中可以创建一个白色背景的StackPanel来遮盖住水印的位置。在这个函数执行的时候，还为每个DataPoint点加载了一个点击事件，处理当这些点被点击之后触发的事件（在事件里面获取DataPoint的X轴，Y轴等，以便进行相关操作）,其源码如下：
void dataPoint_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
DataPoint dp = sender as DataP
MessageBox.Show(dp.YValue.ToString());
&&&&&&& 最后我们模拟一个内存使用率的图标，设置了8个时间点的8个内存使用值的初始值。在MainPage.xaml.cs的主函数中我们编写以下代码：
public MainPage()
InitializeComponent();
//模拟的8个时间点
List&DateTime& DTimeList = new List&DateTime&()
new DateTime(2010,2,15,7,11,03),
new DateTime(2010,2,15,7,12,03),
new DateTime(2010,2,15,7,13,03),
new DateTime(2010,2,15,7,14,03),
new DateTime(2010,2,15,7,15,03),
new DateTime(2010,2,15,7,16,03),
new DateTime(2010,2,15,7,17,03),
new DateTime(2010,2,15,7,18,03)
//模拟的8个内存使用率值
List&string& strList = new List&string&() { "20", "55", "40", "70", "57", "12", "49", "60" };
//按照1分钟的间隔来显示X轴坐标之间的数字。每隔20秒为一个单位长度，Y轴值的后缀为"%"
CreateChart("内存使用率", DTimeList, strList, 0, 0, "%", new TimeSpan(0,0,20) , 1, IntervalTypes.Minutes);
&&&&&&&&一个Visifire图表的组成如下图：
&&&&&&&& 由上图我们可以看出一个Visifire图表由（Title,ChartGrid,Ticks,PlotArea,TrendLind,ToolTip,AxisLabels,Axis,DataSeries,DataPoint,Legend）组成。每个部分都是一个类，所以我们在使用Visifire过程中，如果有什么需要修改的地方，直接在后台创建图表的时候，修改相应的类就可以了。
&&&&&&& 本实例有VS2010+Silverlight 4.0编写，点击& 下载实例源码。下面贴出本实例运行效果图：
阅读(...) 评论()VB颜色图例及使用方法
来源：csdn
【各位大哥大姐，新手，求帮助。
我想弄一个颜色的图例，如下图：
右边是颜色，左边是数字，数字表示的一些点的值的大小，就是想绘一些点，用不同的平滑颜色表示，
这该怎么做呢？
如果能做，随便给一些值，取最大最小，如何让最小对应最底下的颜色，最大对应最上面的颜色呢，中间就依次内插排列呢。
KingOfPorcupine:
你的问题描述不够详细 你程序运行起来的目的是什么
噢，不够详细么，不好意思，是这样，有一系列值(x,y,z)，x，y是坐标，用vb来画点来表示x，y坐标的对应的z值，z值因为大小都不一样（比方说这次都是0-1内的），想用不同的颜色来表示，是可以对范围进行限制，对各部分限定某一种颜色，这样做事可以，但是这样的话，换了一部分z值不就又不行了吗（比如这次z成了100-200内的了），想做的通用一些。于是就有了这个问题，就是想是否可以弄一个这样的渐变的颜色带（颜色可以自己定义：如红过渡到黄再过渡到红类似这样的），然后怎么样将z值和这些颜色结合起来，看到这个点是什么颜色的，就能知道这个z值大概是在什么范围。就是这么个意思。
这位大哥，我是特别新的新手，解释的不清楚的话，请多原谅，如果可以，请多多帮助，给我讲一下。
KingOfPorcupine:
你是想把一组颜色进行分类然后再喷绘出来？
颜色分类再喷绘是什么意思，该怎么做呢？
zhao4zhong1:
搜RGB HSL HSV
KingOfPorcupine:
好东西学习了
以前逛贴吧时看到的代码，你参考下。
'添加控件Picture1，然后粘贴下面代码运行看效果
Private Sub Form_Load()
Me.Move (Screen.Width - Me.Width) \ 2, (Screen.Height - Me.Height) \ 2
Picture1.Move 90, Me.ScaleHeight / 2, Me.ScaleWidth - 180, 180
Picture1.AutoRedraw = True
MakeRGB RGB(255, 0, 0), RGB(255, 255, 0), Picture1, 0, , Int(Picture1.ScaleWidth / 6)
MakeRGB RGB(255, 255, 0), RGB(0, 255, 0), Picture1, Int(Picture1.ScaleWidth / 6) + 1, , Int(Picture1.ScaleWidth / 6)
MakeRGB RGB(0, 255, 0), RGB(0, 255, 255), Picture1, Int(Picture1.ScaleWidth / 6) * 2 + 2, , Int(Picture1.ScaleWidth / 6)
MakeRGB RGB(0, 255, 255), RGB(0, 0, 255), Picture1, Int(Picture1.ScaleWidth / 6) * 3 + 3, , Int(Picture1.ScaleWidth / 6)
MakeRGB RGB(0, 0, 255), RGB(255, 0, 255), Picture1, Int(Picture1.ScaleWidth / 6) * 4 + 4, , Int(Picture1.ScaleWidth / 6)
MakeRGB RGB(255, 0, 255), RGB(255, 0, 0), Picture1, Int(Picture1.ScaleWidth / 6) * 5 + 5, , Int(Picture1.ScaleWidth / 6) - 5
Private Sub MakeRGB(ByVal Color1 As Long, ByVal Color2 As Long, dest, Optional ByVal startX As Long = 0, Optional ByVal startY As Long = 0, Optional ByVal Width As Long = 0, Optional ByVal Height As Long = 0, Optional ByVal s As Integer = 0) '0=横 1=竖
Dim r1%, r2%, g1%, g2%, b1%, b2%, r As Double, g As Double, b As Double
r1 = Color1 And RGB(255, 0, 0)
g1 = (Color1 And RGB(0, 255, 0)) \ &H100
b1 = (Color1 And RGB(0, 0, 255)) \ &H10000
r2 = Color2 And RGB(255, 0, 0)
g2 = (Color2 And RGB(0, 255, 0)) \ &H100
b2 = (Color2 And RGB(0, 0, 255)) \ &H10000
Dim gStepR As Double, gStepG As Double, gStepB As Double
Dim i As Long
If s = 0 Then
gStepR = (r2 - r1) / (IIf(Width = 0, dest.ScaleWidth - startX, Width) - 1)
gStepG = (g2 - g1) / (IIf(Width = 0, dest.ScaleWidth - startX, Width) - 1)
gStepB = (b2 - b1) / (IIf(Width = 0, dest.ScaleWidth - startX, Width) - 1)
For i = startX To IIf(Width = 0, dest.ScaleWidth - startX, Width) + startX
dest.Line (i, 0)-(i, dest.ScaleHeight), RGB(r, g, b)
r = r + gStepR
If r & 0 Then r = 0
g = g + gStepG
If g & 0 Then g = 0
b = b + gStepB
If b & 0 Then b = 0
gStepR = (r2 - r1) / (IIf(Height = 0, dest.ScaleHeight - startY, Height) - 1)
gStepG = (g2 - g1) / (IIf(Height = 0, dest.ScaleHeight - startY, Height) - 1)
gStepB = (b2 - b1) / (IIf(Height = 0, dest.ScaleHeight - startY, Height) - 1)
For i = startY To IIf(Height = 0, dest.ScaleHeight - startY, Height) + startY
dest.Line (0, i)-(dest.ScaleWidth, i), RGB(r, g, b)
r = r + gStepR
If r & 0 Then r = 0
g = g + gStepG
If g & 0 Then g = 0
b = b + gStepB
If b & 0 Then b = 0
琢磨了下变成竖着的了，其他的画标尺的你自己研究完成吧。 代码下载：
xiaozhe_song:
请输入一个长度最少是6的字符串~
免责声明：本站部分内容、图片、文字、视频等来自于互联网，仅供大家学习与交流。相关内容如涉嫌侵犯您的知识产权或其他合法权益，请向本站发送有效通知，我们会及时处理。反馈邮箱&&&&。
学生服务号
在线咨询，奖学金返现，名师点评，等你来互动1124人阅读
visifire 饼状图加图例只需要在 DataSeries & &中将 ShowInLegend 属性 设置为true
Visifire.Charts.Chart thisChart = new Chart();
& & & & & & Title title = new Title();
& & & & & & title.Text = &&;
& & &// & & & & thisChart.Titles.Add(title);
& & & & & & thisChart.ZoomingEnabled =
& & & & & & thisChart.IndicatorEnabled =
& & & & & & thisChart.ToolBarEnabled =
& & & & & & thisChart.Theme = &Theme2&;
& & & & & & thisChart.View3D =
& & & & &&
& & & & & & Axis axisX = new Axis();
& & & & & &&
& & & & & & thisChart.AxesX.Add(axisX);
& & & & & & Axis axisY1 = new Axis();
& & & & & & axisY1.AxisType = AxisTypes.P
& & & & & & axisY1.AxisMinimum = 0;
& & & & & &
& & & & & & axisY1.Title = &总数（个）&;
& & & & & & thisChart.AxesY.Add(axisY1);
& & & & & & DataSeries dataS
& & & & & & dataSeries = new DataSeries();
& & & & & & dataSeries.AxisXType = AxisTypes.P
& & & & & & dataSeries.RenderAs = RenderAs.P
& & & & & & dataSeries.MarkerEnabled =
& & & & & & dataSeries.LegendText = &123&;
& & & & & & dataSeries.ShowInLegend =
& & & & & & dataSeries.ToolTipText = &#AxisXLabel,#YValue(条)&;
& & & & & & DataPoint dataP
& & & & & & dataPoint = new DataPoint();
& & & & & & dataPoint.AxisXLabel = &a&;
& & & & & & dataPoint.YValue = 59;
& & & & & & dataPoint.LabelEnabled =
& & & & & & dataPoint.LabelText = &a,& + 59 + &条&;
& & & & & & dataPoint.ToolTipText = &a,& + 59 + &条&;
& & & & & & dataPoint.LegendText = &a&;
& & & & & & dataPoint.Color = new SolidColorBrush(Color.FromArgb(255, 226, 136, 41));
& & & & & & dataSeries.DataPoints.Add(dataPoint);
& & & & & & dataPoint = new DataPoint();
& & & & & & dataPoint.AxisXLabel = &b&;
& & & & & & dataPoint.YValue = 35;
& & & & & & dataPoint.LabelEnabled =
& & & & & & dataPoint.LabelText = &b,& + 35 + &个&;
& & & & & & dataPoint.ToolTipText = &b,& + 35 + &个&;
& & & & & & dataPoint.LegendText = &b&;
& & & & & & dataSeries.DataPoints.Add(dataPoint);
& & & & & & dataPoint = new DataPoint();
& & & & & & dataPoint.AxisXLabel = &实测与调查最大洪水次数&;
& & & & & & dataPoint.YValue = 12;
& & & & & & dataPoint.LabelEnabled =
& & & & & & dataPoint.LabelText = &b,& + 12 + &次&;
& & & & & & dataPoint.LegendText = &b&;
& & & & & & dataPoint.ToolTipText = &b,& + 12 + &次&;
& & & & & & dataSeries.DataPoints.Add(dataPoint);
& & & & & & dataPoint = new DataPoint();
& & & & & & dataPoint.AxisXLabel = &c&;
& & & & & & dataPoint.YValue =8;
& & & & & & dataPoint.LabelEnabled =
& & & & & & dataPoint.LabelText = &c,& + 8 + &条&;
& & & & & & dataPoint.ToolTipText = &c,& + 8 + &条&;
& & & & & & dataPoint.LegendText = &c&;
& & & & & & dataSeries.DataPoints.Add(dataPoint);
& & & & & & thisChart.Series.Add(dataSeries);
& & & & & & g12.Children.Add(thisChart);
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：3129次
排名：千里之外}