x轴不同间隔上不同颜色的折线图填充同一系列？

Question

I created a Line Chart control in Windows Forms.

I divided the ChartArea, AxisX into four intervals but I want to apply back color (unique color) to each interval.

Can someone help me on this?

Answer 1

AxisX into four intervals but I want to apply back color (unique color)

These intervals are created with colored StripLine (s). Either via code:

var stripLine = new System.Windows.Forms.DataVisualization.Charting.StripLine()
{
    BackColor = Color.Blue,
    IntervalOffset = 4, // This is where the stripline starts
    StripWidth = 2 // And this is how long the interval is
};

chart1.ChartAreas[0].AxisX.StripLines.Add(stripLine);

You need to add data points for the interval to show.

Or, StripLines can also be added from VS design mode from (Properties) -> ChartAreas -> Select a ChartArea -> Axes -> Select the Axis you want it to show on -> StripLines, then Add StripLine. You have to set a BackColor , IntervalOffset and StripWidth for it to show. If you set StripLine.Interval it will repeat by that interval.

Answer 2

You could paint those areas, but this would always show above all chart elements including grid and data points.

So, as NLindborn suggests, the best way are StripLines .

They are under all elements and will scale nicely.

Note that their properties are in data values , so you need to know the values, or rather the x-axis range, in your chart.

Here is complete code example using StripLines :

// set up the chart:
ChartArea ca = chart.ChartAreas[0];
chart.Series.Clear();
for (int i = 0; i < 5; i++)
{
    Series s = chart.Series.Add("Series" + (i+1));
    s.ChartType = SeriesChartType.Line;
    s.BorderWidth = 2;
}

// add a few test data
for (int i = 0; i <= 360; i++)
{
    chart.Series[0].Points.AddXY(i, Math.Sin(i * Math.PI / 180f));
    chart.Series[1].Points.AddXY(i, Math.Cos(i * Math.PI / 180f));
    chart.Series[2].Points.AddXY(i, Math.Sin(i * Math.PI / 90f));
    chart.Series[3].Points.AddXY(i, Math.Cos(i * Math.PI / 90f));
    chart.Series[4].Points.AddXY(i, Math.Sin(i * Math.PI / 30f));
}
      
// set up the chart area:  
Axis ax = ca.AxisX;
ax.Minimum = 0;
ax.Maximum = 360;
ax.Interval = 30;

// a few semi-transparent colors
List<Color> colors = new List<Color>()  { Color.FromArgb(64, Color.LightBlue),  
  Color.FromArgb(64, Color.LightSalmon),  Color.FromArgb(64, Color.LightSeaGreen),  
  Color.FromArgb(64, Color.LightGoldenrodYellow)};

Now we are ready to create the StripLines:

// this is the width of the chart in values:
double hrange = ax.Maximum - ax.Minimum;

// now we create and add four striplines:
for (int i = 0; i < 4; i++)
{
    StripLine sl = new StripLine();
    sl.Interval = hrange;                   // no less than the range, so it won't repeat
    sl.StripWidth = hrange / 4f;            // width
    sl.IntervalOffset = sl.StripWidth * i;  // x-position
    sl.BackColor = colors[i];
    ax.StripLines.Add(sl);
}

Note that you will need to adapt the stripline data whenever you change the axis range!

Also note the StripLine use axis values.

Update:

One common issue is to move the striplines when zooming. Without a little help they will stick to the original positions. Codeing the AxisViewChanged will help, maybe like so:

For each of your striplines calculate an IntervalOffset ; in the simplest case of the 1st one this should work:

   chart1.ChartAreas[0].AxisX.StripLines[0].IntervalOffset = 
           chart1.Series[0].Points[0].XValue - e.NewPosition;

For the others add the correct multiple of the width as above!