Color and legend of custom data points in the visifire chart

This article describes the color of the data point (datapoint) of the custom visifire chart and the legend of the custom chart (LEGEND) through examples ).

The visifire chart has a built-in 15 color scheme for us to choose from. If you do not specify the color scheme when creating the chart, visifire automatically uses the first color scheme visifire1 as the default color scheme. Sometimes we want to use the color defined by ourselves as the color scheme of the chart, which can be specified by the colorset attribute of visifire. The following is an example of using a custom color scheme when creating a chart using XAML.Code:

<! -- The colorset attribute of chart specifies the custom color scheme 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> <! -- Custom color scheme --> <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: Set whether to display the legend --> <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>

 

The running result is as follows: use C # To set the color of custom data points:

// Create a chart instance chart = new chart (); chart. width = 300; chart. height = 300; // create a colorset instance colorset cs = new colorset (); CS. id = "colorset1"; // set the colorset ID to colorset1cs. 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"; // sets the custom color set colorset1dataseries dataseries = new dataseries () for the chart. renderas = renderas. column; 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 );
 

 

The running result of the above Code is the same as that of the icon using the XAML code.

The color Quantity in the color set can be different from the data points in the dataset. If the color quantity is smaller than the data point quantity, visifire cyclically uses the color in the color set to set the color of the data point; if the color quantity is greater than the number of data points, visifire uses the first several colors in the color set with the same number of data points to set the color of the data point.

Sometimes there are multiple charts on the same page, and the number and color of the data points of these charts are the same. We want these charts to use one legend together, at this time, if the color of the chart data points is customized using the above method, we can easily set a legend using our own color settings; but if we use the preset color in visifire, can we share multiple charts with one of our own legends? Of course, the answer is yes. Someone may think that the chart has a colorsets attribute. We can use this attribute to obtain the color used by the chart, and then set a legend. Unfortunately, the colorsets attribute of the chart is empty when the preset color is used. How can we get the preset color set of visifire? The default color set of visifire is saved as "visifire. charts. colorsets. in the XAML file, we can use this file to obtain the preset color set of visifire, and then use the colorset attribute of the chart to obtain the color set used by the chart when the chart is loaded. The sample code is as follows:

Private void createchart1 () {chart = new chart (); chart. colorset = "visired"; // visifire1chart. loaded + = new routedeventhandler (chart1_loaded); chart. width = 300; chart. height = 300; dataseries = new dataseries (); dataseries. renderas = renderas. column; 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);} // event void chart1_loaded (Object sender, routedeventargs e) when the chart is loaded {chart = sender as chart; If (chart! = NULL) {// create a colorset set colorsets EMCS = new colorsets (); string resourcename = "visifire. charts. colorsets. XAML "; // file 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 colorsets; reader. close (); S. close () ;}// obtain the colorset of the chart based on the name (the colorset attribute of the chart is the name of the color set) colorset cs = EMCs. getcolorsetbyname (chart. colorset); // stackpanelstackpanel sp = new stackpanel () {orientation = orientation. horizontal, verticalalignment = system. windows. verticalalignment. top, horizontalalignment = system. windows. horizontalalignment. center}; // legend text string [] legendtext = {"chicken", "Duck", "goose", "dog", "cat "}; // custom legend for (INT I = 0; I <chart. series [0]. datapoints. count; I ++) {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 );}}

 

The above code first creates a chart, and then obtains the color set used by the chart in the chart loading event to create a custom legend. The running result is as follows:

Sample Code: mimizedatapointcolor.zip