作成日: 2021/04/16 最終更新日: 2021/04/16
文書種別
使用方法
詳細
カスタムパレットを使用すると、折れ線グラフの線の色を、シリーズごとに個別に指定することができます。
※この場合、折れ線とシンボルの色は同じになります。
※この場合、折れ線とシンボルの色は同じになります。

【XAML】
<Grid>
<c1:C1FlexChart x:Name="flexChart"></c1:C1FlexChart>
</Grid>
【コード】
using C1.Chart;
using C1.WPF.Chart;
namespace FlexChartLineSymbol
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
// データ連結
flexChart.ItemsSource = DataSource.GetCryptoRates();
flexChart.ChartType = ChartType.LineSymbols;
flexChart.BindingX = "Year";
flexChart.AxisY.Min = 2;
flexChart.LegendPosition = Position.Top;
// (1)カスタムパレットを使用
flexChart.Palette = Palette.Custom;
flexChart.CustomPalette = new List<Brush>()
{
new SolidColorBrush(Color.FromRgb(0, 128, 0)), // 緑
new SolidColorBrush(Color.FromRgb(0, 0, 255)), // 青
};
flexChart.Series.Add(new Series()
{
Binding = "BitCoin",
SeriesName = "BitCoin",
});
flexChart.Series.Add(new Series()
{
Binding = "LiteCoin",
SeriesName = "LiteCoin",
});
}
public static class DataSource
{
private static Random rnd = new Random(1230);
public static List<CryptoRate> GetCryptoRates()
{
var data = new List<CryptoRate>();
for(int i = 1; i < 10; i++)
{
data.Add(new CryptoRate()
{
BitCoin = rnd.Next(10, 20),
LiteCoin = rnd.Next(2, 10),
Year = 2000 + i
}); ;
}
return data;
}
}
public class CryptoRate
{
public double BitCoin { get; set; }
public double LiteCoin { get; set; }
public int Year { get; set; }
}
}
また、カスタムパレットを使用する代わりに、シリーズのStyleのStrokeおよびFillプロパティを個別に設定すると、折れ線およびシンボルの色を別々に指定することが可能です。

上記コードの「(1)カスタムパレットを使用」の部分を次のように置き換えて、動作をご確認ください。
// (2)シリーズごとに直接色を設定する方法 : 線とシンボルの色を別々に設定可能
flexChart.Series.Add(new Series()
{
Binding = "BitCoin",
SeriesName = "BitCoin",
Style = new ChartStyle()
{
Stroke = Brushes.Green,
Fill = Brushes.Orange,
},
});
flexChart.Series.Add(new Series()
{
Binding = "LiteCoin",
SeriesName = "LiteCoin",
Style = new ChartStyle()
{
Stroke = Brushes.Blue,
Fill = Brushes.Yellow,
},
});